通过jQuery将HTML表格数据转换为数组 [英] HTML table data into arrays via jQuery

问题描述

我想从HTML表格中提取数据，例如

 < table> 
< tr> 
< th> Header1< / th> 
< th> Header2< / th> 
< th> Header3< / th> 
< / tr> 
< tr> 
< td>值1,1< / td> 
< td>值2,1< / td> 
< td>值3,1< / td> 
< / tr> 
 
 ... rows ... 
 
< / table> 
  

并获得数组：

一个数组的标题

一个2d数组的列值（或每列数组）

我该怎么做这使用jQuery？

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

---

相关一般设计问题：

目前我有类似的东西

  1。 ajax查询返回html表
 2.使用jQuery从html表中获取值
 3.渲染图
  

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

  $（function（）{
 
 var headers = $（ span（），$（＃tblVersions））。map（function（）{
 return this.innerHTML; 
））。get（）; 
 
 var rows = $ （tbody tr，$（＃tblVersions））。map（function（）{
 return [$（td：eq（0）input：checkbox： ）{
 return this.innerHTML; 
}）。get（）]; 
}）。get（）; 
 
 alert（rows）; 
}）; 
  

I want to extract data from an html table like

<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:

an array for the headers

a 2d array for the column values (or an array for each column)

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?

解决方案

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

这篇关于通过jQuery将HTML表格数据转换为数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！