Dreyfus15 Dreyfus15 - 1 month ago 6
HTML Question

Convert html table to array in javascript

I would like to ask is it possible to convert an HTML TABLE into Array in javascript? I have this table. I haven't tried anything yet.

<table id="cartGrid">
<thead>
<tr>
<th>Item Description</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Ext Price</th>
</tr>
</thead>
<tbody>
<tr><td>Old Lamp</td><td>1</td><td>107.00</td><td>107.00</td>
<tr><td>Blue POst</td><td>2</td><td>7.00</td><td>14.00</td>
</tbody>
</table>

Answer

Here's one example of doing what you want.

var myTableArray = [];

$("table#cartGrid tr").each(function() {
    var arrayOfThisRow = [];
    var tableData = $(this).find('td');
    if (tableData.length > 0) {
        tableData.each(function() { arrayOfThisRow.push($(this).text()); });
        myTableArray.push(arrayOfThisRow);
    }
});

alert(myTableArray);

You could probably expand on this, say, using the text of the TH to instead create a key-value pair for each TD.

Since this implementation uses a multidimensional array, you can access a row and a td by doing something like this:

myTableArray[1][3] // Fourth td of the second tablerow

Edit: Here's a fiddle for your example: http://jsfiddle.net/PKB9j/1/

Comments