Create Array from table using jQuery

Question

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 combine them in 1 array per my desired result above. Looking for some help to resolve.

MY DEMO HERE

Chris Dixon · Accepted Answer · 2014-01-20 12:49:59Z

5

var combined = [];  

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

See it here:

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

answered Jan 20, 2014 at 12:49

Chris Dixon

9,1777 gold badges38 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2014-01-20 13:02:10Z

3

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

FIDDLE

edited Jan 20, 2014 at 13:02

answered Jan 20, 2014 at 12:57

adeneo

319k29 gold badges410 silver badges392 bronze badges

8 Comments

Kevin Bowersox Over a year ago

Very nice code, one suggestion though. You could pass the index as the second argument to map function, eliminating the need for $(el).index()

adeneo Over a year ago

@KevinBowersox - That's true, didn't think of that when I was typing. Added!

Redwall Over a year ago

thanks a lot, that is a nice bit of code. 1 thing I just realised is that my code is now giving out as there is no date object returned. Is it possible in the array (and sorry I know this is an addition) that you can return the date field in the th as a date object in the array? thanks and sorry for late follow up..

Chris Dixon Over a year ago

Not to sound like a poor sport for having the correct answer taken away, but isn't this just a jQuery exercise answer? Using a standard JS for loop and array push is just as easy to read, as well as more efficient. Not saying that it isn't nice code, but everything has its place in complexity.

adeneo Over a year ago

@Redwall - You're free to pick whatever answer you like, it's totally up to you, don't sweat it. It's just a little annoying sometimes when you're scrambling to post an answer, and then an answer posted ten minutes later is accepted, but again, you're the one who picks an answer, and whatever works for you is the right answer.

|

Denys Séguret · Accepted Answer · 2014-01-20 12:53:02Z

2

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

edited Jan 20, 2014 at 12:53

answered Jan 20, 2014 at 12:47

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2014-01-20 12:51:29Z

1

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.net/FtK4b/1/

answered Jan 20, 2014 at 12:51

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

Linga · Accepted Answer · 2014-01-20 12:59:37Z

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

edited Jan 20, 2014 at 12:59

answered Jan 20, 2014 at 12:52

Linga

10.6k10 gold badges57 silver badges109 bronze badges

Collectives™ on Stack Overflow

Create Array from table using jQuery

5 Answers 5

Comments

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related