Javascript 通过 jQuery 将 HTML 表格数据转换为数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4349952/
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
HTML table data into arrays via jQuery
提问by sova
I want to extract data from an html table like
我想从一个 html 表中提取数据，比如
<table>
<tr>
<th> Header1 </th>
<th> Header2 </th>
<th> Header3 </th>
</tr>
<tr>
<td> Value 1,1 </td>
<td> Value 2,1 </td>
<td> Value 3,1 </td>
</tr>
... rows ...
</table>
and get arrays:
并获取数组：
How can I do this using jQuery?
I don't care to serialize it, or put it into a JSON object because I want to use it to render a chart.
related General design question:
at the moment I have something like
1. ajax query returns html table
2. use jQuery to get values from html table
3. render chart
does it make more sense to throw a JSON object back from the ajax query and then render a table and a chart from there?
我如何使用 jQuery 做到这一点？
我不在乎序列化它，或者将它放入一个 JSON 对象中，因为我想用它来呈现图表。
相关通用设计问题：
目前我有类似的东西
1. ajax query returns html table
2. use jQuery to get values from html table
3. render chart
从 ajax 查询中抛出一个 JSON 对象然后从那里呈现一个表格和图表是否更有意义？
回答by simshaun
Something like this?
像这样的东西？
$(function() {
var headers = $("span",$("#tblVersions")).map(function() {
return this.innerHTML;
}).get();
var rows = $("tbody tr",$("#tblVersions")).map(function() {
return [$("td:eq(0) input:checkbox:checked",this).map(function() {
return this.innerHTML;
}).get()];
}).get();
alert(rows);
});
回答by Ish
demo updated http://jsfiddle.net/ish1301/cnsnk/
演示更新http://jsfiddle.net/ish1301/cnsnk/
var header = Array();
$("table tr th").each(function(i, v){
header[i] = $(this).text();
})
alert(header);
var data = Array();
$("table tr").each(function(i, v){
data[i] = Array();
$(this).children('td').each(function(ii, vv){
data[i][ii] = $(this).text();
});
})
alert(data);
回答by Jerome WAGNER
yet another way of doing it
另一种方法
var headers = jQuery('th').map(function(i,e) { return e.innerHTML;}).get();
var datas = []
jQuery.each(jQuery('tr:gt(0)'), function(i,e ) {
datas.push(jQuery('td', e).map(function(i,e) {
return e.innerHTML;
}).get()
);
});
回答by Karen Zilles
Here's a modification of Jerome Wagner's answer that uses recursive maps instead of a map inside an 'each':
这是 Jerome Wagner 的答案的修改，它使用递归映射而不是“每个”中的映射：
http://jsbin.com/oveva3/383/edit
http://jsbin.com/oveva3/383/edit
var headers = $("th",$("#meme")).map(function() {
return this.innerHTML;
}).get();
var rows = $("tbody tr",$("#meme")).map(function() {
return [$("td",this).map(function() {
return this.innerHTML;
}).get()];
}).get();
回答by CervEd
I'm tinkering with the same thing over here, but I prefer iterating through all tables and writing the header and body arrays into properties of each table, so here's my modification to the original answer:
我在这里修补同样的事情，但我更喜欢遍历所有表并将标题和正文数组写入每个表的属性，所以这是我对原始答案的修改：
$(function() {
$("table").each(function(){
var $table = $(this),
$headerCells = $("thead th", $(this)),
$rows = $("tbody tr", $(this));
var headers = [],
rows = [];
$headerCells.each(function(k,v) {
headers[headers.length] = $(this).text();
$table.prop("headAry", headers);
});
$rows.each(function(row,v) {
$(this).find("td").each(function(cell,v) {
if (typeof rows[cell] === 'undefined') rows[cell] = [];
rows[cell][row] = $(this).text();
$table.prop("bodAry", rows);
});
});
console.log($(this).prop('headAry'));
console.log($(this).prop('bodAry'));
});
});
回答by Dave Ward
does it make more sense to throw a JSON object back from the ajax query and then render a table and a chart from there?
从 ajax 查询中抛出一个 JSON 对象然后从那里呈现一个表格和图表是否更有意义？
Yes, absolutely. Return JSON in response to your AJAX request, then you can render the table using something like jQuery Templates and use the same underlying data to generate your chart as well.
是的，一点没错。返回 JSON 以响应您的 AJAX 请求，然后您可以使用类似 jQuery 模板的东西呈现表格，并使用相同的基础数据来生成图表。
回答by Damien-Wright
Something along the lines of:
类似的东西：
var thArray = new Array();
var contentArray = new Array();
$('th').each(function(index) {
thArray[index] = $(this).html();
})
$('tr').each(function(indexParent) {
contentArray['row'+indexParent] = new Array();
$(this).children().each(function(indexChild) {
contentArray['row'+indexParent]['col'+indexChild] = $(this).html();
});
});
This gives you two arrays, thArraywhich is an array of your headings and contentArraywhich is a 2d array containing rows and columns: contentArray['row1']['col0']returns " Value 1,1"
这为您提供了两个数组，thArray它是一个标题数组，它是一个contentArray包含行和列的二维数组：contentArray['row1']['col0']返回“值 1,1”
Actually, contentArray contains the th's as well... referenced 'row0'
实际上， contentArray 也包含th's ... 引用的 'row0'
回答by Chris Westbrook
I would think it would make more sense to get a json array back from the ajax call and generate your table/chart from that. With jquery templates this isn't hard at all.
我认为从 ajax 调用中获取一个 json 数组并从中生成你的表/图表会更有意义。使用 jquery 模板，这一点都不难。
回答by Alaa Aref
Use this line of code:
使用这行代码：
var arrays = [];
$('table').eq(0).find('tr').each((r,row) => arrays.push($(row).find('td,th').map((c,cell) => $(cell).text()).toArray()))
