Javascript 将表转换为数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8231310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert Table to an Array
提问by ayyp
I have seen many posts about how to turn an array into a table, but not nearly as many going the other way. I'm looking to take a table like this:
我看过很多关于如何将数组转换为表格的帖子，但几乎没有其他方式。我想拿一张这样的桌子：
<table id="dataTable">
<tr>
<th>Functional Category</th>
<th>Brand Name</th>
<th>When Obtained</th>
<th>How Obtained</th>
<th>How Often Worn</th>
<th>Where Made</th>
<th>Has a Graphic</th>
</tr>
<tr>
<td>T-Shirt</td>
<td>threadless</td>
<td>Last 3 Months</td>
<td>Purchased</td>
<td>Monthly</td>
<td>India</td>
<td>Yes</td>
</tr>
<tr>
<td>T-Shirt</td>
<td>RVCA</td>
<td>2 Years Ago</td>
<td>Purchased</td>
<td>Bi-Monthly</td>
<td>Mexico</td>
<td>Yes</td>
</tr>
</table>
Into an array like this:
变成这样的数组：
var tableData = [
{
category: "T-shirt",
brandName: "threadless",
whenObtained: "Last 3 Months",
howObtained: "Purchased",
howOftenWorn: "Monthly",
whereMade: "India",
hasGraphic: "Yes"
},
{
category: "T-shirt",
brandName: "RVCA",
whenObtained: "2 Years Ago",
howObtained: "Purchased",
howOftenWorn: "Bi-Monthly",
whereMade: "Mexico",
hasGraphic: "Yes"
}
]
I am looking to use jQuery for this and was wondering what the best way to go about this is.
我希望为此使用 jQuery，并且想知道解决此问题的最佳方法是什么。
回答by Rich O'Kelly
The following should do it!
应该做到以下几点！
var array = [];
var headers = [];
$('#dataTable th').each(function(index, item) {
headers[index] = $(item).html();
});
$('#dataTable tr').has('td').each(function() {
var arrayItem = {};
$('td', $(this)).each(function(index, item) {
arrayItem[headers[index]] = $(item).html();
});
array.push(arrayItem);
});
回答by Will
var table = document.getElementById( "dataTable" );
var tableArr = [];
for ( var i = 1; i < table.rows.length; i++ ) {
tableArr.push({
category: table.rows[i].cells[0].innerHTML,
brandName: table.rows[i].cells[1].innerHTML,
whenObtained: table.rows[i].cells[2].innerHTML,
howObtained: table.rows[i].cells[3].innerHTML,
howOftenWorn: table.rows[i].cells[4].innerHTML,
whereMade: table.rows[i].cells[5].innerHTML,
hasGraphic: table.rows[i].cells[6].innerHTML
});
}
回答by John Kalberer
So what I did is select all the trelements and iterate over them. Next i check to make sure I am not looking at thelements. Then i use the colsarray to populate the objects. This could have been simpler (2d array) but I use colssince that is what you had as your output.
所以我所做的是选择所有tr元素并迭代它们。接下来我检查以确保我没有查看th元素。然后我使用cols数组来填充对象。这本来可以更简单（二维数组），但我使用它，cols因为那是您的输出。
var i, items, item, dataItem, data = [];
var cols = [ "category", "brandName", "whenObtained", "howObtained", "howOftenWorn",
"whereMade", "hasGraphic" ];
$("#dataTable tr").each(function() {
items = $(this).children('td');
if(items.length === 0) { // return if this tr only contains th
return;
}
dataItem = {};
for(i = 0; i < cols.length; i+=1) {
item = items.eq(i);
if(item) {
dataItem[cols[i]] = item.html();
}
}
data.push(dataItem);
});
回答by James Johnson
See herefor an example. I've included the relevant code below:
有关示例，请参见此处。我在下面包含了相关代码：
$(function() {
var $rows= $("#tableName tbody tr");
var data = [];
$rows.each(function(row, v) {
$(this).find("td").each(function(cell, v) {
if (typeof data[cell] === 'undefined') {
data[cell] = [];
}
data[cell][row] = $(this).text();
});
});
console.log(data);
});
回答by fathergorry
There's a good tool: $(table).map, but saldly, it always return flatten array, no matter how many nested .map() is inside (you need two: one for rows and one for cells).
有一个很好的工具：$(table).map，但遗憾的是，无论内部有多少嵌套的 .map()，它总是返回扁平数组（您需要两个：一个用于行，一个用于单元格）。
So let's use jQuery.map for tables and tr's and object.map() for cells, having 2nd nesting level return an array
因此，让我们将 jQuery.map 用于表格，将 tr 和 object.map() 用于单元格，第二嵌套级别返回一个数组
function t2a (tabble){
return $.map($(tabble),function(el,i) {
return $.map($(el).find('tr'),function(el,i) {
return [
$(el).find('td').map(function() {
return $(this).text();
}).get()
];
});
});
}
