从表数据中获取Javascript对象数组
从表数据中获取Javascript对象数组
提问于 2018-07-02 01:31:30
我可能是javascript的新手，我想从json对象格式的表格中提取数据，我有一个表格，看起来像这样。
<table>
<thead>
<tr>
<th class="active">Bolumn</th>
<th class="active">Column</th>
<th class="active">Dolumn</th>
<th>Molumn</th>
</tr>
</thead>
<tbody>
<tr>
<td class="active">Bolumn Data</td>
<td class="active">Column Data</td>
<td class="active">Dolumn Data</td>
<td>Molumn Data</td>
</tr>
<tr>
<td class="active">Bolumn Data 1</td>
<td class="active">Column Data 1</td>
<td class="active">Dolumn Data 1</td>
<td>Molumn Data 1</td>
</tr>
<tr>
<td class="active">Bolumn Data 2</td>
<td class="active">Column Data 2</td>
<td class="active">Dolumn Data 2</td>
<td>Molumn Data 2</td>
</tr>
</tbody>
</table> 在表中，一些人有活动类，我只需要这个活动类数据
所以我希望json格式是这样的，我希望在jquery方法中
[{"Bolumn":"Bolumn Data","Column":"Column Data","Dolumn":"Dolumn Data"},
{"Bolumn":"Bolumn Data 1","Column":"Column Data 1","Dolumn":"Dolumn Data 1"},
{"Bolumn":"Bolumn Data 2","Column":"Column Data 2","Dolumn":"Dolumn Data 2"}]提前感谢
更新:我试过像这样的代码，但我不知道如何实现它
var array = [];
$('tr').each(function (i) {
$(this).find('td').each(function (i) {
if ($(this).hasClass('active')) {
array.push($(this).text());
}
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-02 02:07:32
你的代码已经非常接近正常工作了。然而，它需要一些东西才能得到你想要的结果。首先，因为您需要对象，所以需要在头部中找到的键。您可以使用与处理数据相同的方法来创建这些元素的数组：
var headers = []
$('tr th').each(function (i) {
headers.push($(this).text())
})现在，您可以在循环中通过索引引用headers，并在执行过程中为键赋值：
// find headers
var headers = []
$('tr th').each(function(i) {
headers.push($(this).text())
})
// result array
var array = [];
$('tr').each(function(i) {
// declare object variable but dont set it's value
// unless there are objects to find
var rowObj
$(this).find('td').each(function(i) {
if (!rowObj) rowObj = {}
if ($(this).hasClass('active')) {
// use the header we found earlier
rowObj[headers[i]] = $(this).text()
}
});
// if we found active objects, rowObje will be defined
if (rowObj) array.push(rowObj)
});
console.log(array)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="active">Bolumn</th>
<th class="active">Column</th>
<th class="active">Dolumn</th>
<th>Molumn</th>
</tr>
</thead>
<tbody>
<tr>
<td class="active">Bolumn Data</td>
<td class="active">Column Data</td>
<td class="active">Dolumn Data</td>
<td>Molumn Data</td>
</tr>
<tr>
<td class="active">Bolumn Data 1</td>
<td class="active">Column Data 1</td>
<td class="active">Dolumn Data 1</td>
<td>Molumn Data 1</td>
</tr>
<tr>
<td class="active">Bolumn Data 2</td>
<td class="active">Column Data 2</td>
<td class="active">Dolumn Data 2</td>
<td>Molumn Data 2</td>
</tr>
</tbody>
</table>
Stack Overflow用户
发布于 2018-07-02 02:50:49
作为jQuery解决方案的替代方案，这里是我使用普通的js和使用Array.prototype.map和Array.prototype.reduce的ES6的解决方案。
学习这些将在将来有用，并将帮助您编写更多的声明性代码。
// 1) extract headers and rows in separate arrays with
// respective `isActive` flag for each item in both
var [headers, ...rows] = [...document.querySelectorAll('tr')].map(
tr => [...tr.querySelectorAll('*')].map(n => ({
name: n.innerText,
isActive: n.classList.contains('active')
})));
// 2) iterate over the `rows` and dynamically aggregate the output object
// by matching headers and rows based on their indexes:
var result = rows.map(row => {
return headers.reduce((obj, h, j) => {
if (h.isActive && row[j].isActive) {
obj[h.name] = row[j].name;
}
return obj;
}, {});
});
console.log(result);<table>
<thead>
<tr>
<th class="active">Bolumn</th>
<th class="active">Column</th>
<th class="active">Dolumn</th>
<th>Molumn</th>
</tr>
</thead>
<tbody>
<tr>
<td class="active">Bolumn Data</td>
<td class="active">Column Data</td>
<td class="active">Dolumn Data</td>
<td>Molumn Data</td>
</tr>
<tr>
<td class="active">Bolumn Data 1</td>
<td class="active">Column Data 1</td>
<td class="active">Dolumn Data 1</td>
<td>Molumn Data 1</td>
</tr>
<tr>
<td class="active">Bolumn Data 2</td>
<td class="active">Column Data 2</td>
<td class="active">Dolumn Data 2</td>
<td>Molumn Data 2</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51125502
复制相关文章
相似问题