Question

我希望使用带有<thead>和<tbody>

的表格中的jQuery创建数组

我要找的结果是

[[20th Jan, 33], [21st Jan, 44], [22nd Jan, 5],[23rd Jan, 17]]

我的表格如下

<table class="" id="bookedTable" border="1">
<thead>
    <tr>
        <th>Date</th>
        <th>20th jan</th>
        <th>21st jan</th>
        <th>22nd jan</th>
        <th>23rd Jan</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Name</td>
        <td>33</td>
        <td>44</td>
        <td>5</td>
        <td>17</td>
    </tr>
</tbody>

我的JS如下

$(function() {
var $table = $("#bookedTable"),
  $headerCells = $table.find("thead th"),
  $rowCells = $table.find("tbody tr td");

var headers = [],
  rows = [];

$headerCells.each(function(k,v) {
 headers[headers.length] = $(this).text();
});

$rowCells.each(function(k,v) {
 rows[rows.length] = $(this).text();
});

console.log(headers);
console.log(rows);
});

我只能弄清楚如何在每个我想要的结果上单独控制日志标题和行，而不是将它们组合成1个数组。寻求一些帮助来解决。

MY DEMO HERE

Answer 1

var combined = [];  

for(var i = 1; i < $headerCells.length; i++) {
    combined.push([$($headerCells[i]).text(), $($rowCells[i]).text()]);
}

在此处查看：

http://jsfiddle.net/kp7zK/2/

Answer 2

var arr = $.map($('#bookedTable th:not(:first)'), function(el,i) {
    return [[$(el).text(), $('#bookedTable td:eq('+i+')').text()]];
});

FIDDLE

Answer 3

您不必单独选择标题（这将替换整个代码）：

var $table = $("#bookedTable"), l = [];
$table.find('thead th').each(function(i){
 l.push([$(this).text(), $('table tbody td').eq(i).text()])
});
l = l.slice(1);

Demonstration

Answer 4

var myArr = [];
$("table thead tr th").each(function(i){
    if(i != 0){
        var colValue = $("table tbody tr td").eq(i).text();
        myArr.push([this.innerHTML, colValue]);
    }
});

JS小提琴： http://jsfiddle.net/FtK4b/1/

Answer 5

试试这个

$(function() {
   var rows = [];
   $('tbody tr td').each(function(k,v) {
     if(k>0)
          rows.push([ $('thead th:eq('+k+')').text(),$(this).text()]);
   });
   alert(rows.toSource());
});

这是工作Fiddle

使用jQuery从表创建数组

5 个答案: