I am looking to create an array using jQuery from a table with a <thead> and a <tbody>

The result I am looking for is

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

My Table is as follows

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

My JS is as follows

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

I can only figure out how to console log the header and rows sepeartely and not bine them in 1 array per my desired result above. Looking for some help to resolve.

MY DEMO HERE

I am looking to create an array using jQuery from a table with a <thead> and a <tbody>

The result I am looking for is

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

My Table is as follows

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

My JS is as follows

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

I can only figure out how to console log the header and rows sepeartely and not bine them in 1 array per my desired result above. Looking for some help to resolve.

MY DEMO HERE

• javascript
• jquery
• html

5 Answers 5

var bined = [];  

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

See it here:

http://jsfiddle/kp7zK/2/

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

FIDDLE

You don't have to separately pick the headers (this replaces the whole code) :

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

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 Fiddle: http://jsfiddle/FtK4b/1/

Try this

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

Here is the working Fiddle