通过jQuery将HTML表数据转换为数组

我想从像html表中提取数据

 ... rows ... 
 
 
 Header1 
 
 Header2 
 
 Header3 
 
 
 
 Value 1,1 
 
 Value 2,1 
 
 Value 3,1 
  

并获取数组：

标题的数组

列值的二维数组（或每列的数组）

我怎么能用jQuery做到这一点？

我不关心它序列化，或者把它放到JSON对象中，因为我想用它来渲染图表。

---

相关的一般设计问题：

此刻我有类似的东西

 1. ajax query returns html table 2. use jQuery to get values from html table 3. render chart 

从ajax查询中抛出JSON对象然后从那里渲染表和图表会更有意义吗？

Answer 1

像这样的东西？

 $(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); }); 

Answer 2

演示更新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); 

Answer 3

另一种方式

 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() ); }); 

Answer 4

有点像：

 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(); }); }); 

这将为您提供两个数组， thArray是一个标题数组， contentArray是一个包含行和列的二维数组： contentArray['row1']['col0']返回“Value 1,1”

实际上，contentArray也包含了…引用了’row0′

Answer 5

从ajax查询中抛出JSON对象然后从那里渲染表和图表会更有意义吗？

是的，一点没错。 返回JSON以响应您的AJAX请求，然后您可以使用jQuery模板之类的方式呈现表，并使用相同的基础数据来生成图表。

Answer 6

我在这里修补同样的东西，但我更喜欢遍历所有表并将标题和正文数组写入每个表的属性，所以这是我对原始答案的修改：

 $(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')); }); }); 

JSbin

Answer 7

我认为从ajax调用中获取一个json数组并从中生成表/图表会更有意义。 使用jquery模板这并不难。

Answer 8

这是对Jerome Wagner的回答的修改，它使用递归映射而不是’each’中的映射：

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();