Store HTML Table Values in a Javascript Array

by Avinashullal

HTML

<table border="1" id="sampleTbl" width="515">
    <thead>
        <tr>
            <th align="center" width="20">Task No.</th>
            <th width="150">Date</th>
            <th width="170">Description</th>
            <th width="170">Task</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center">1</td>
            <td>December 24, 2012</td>
            <td>Christmas Eve</td>
            <td>Make dinner</td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td>January 11, 2013</td>
            <td>Anniversary</td>
            <td>Pickup flowers</td>
        </tr>
        <tr>
            <td align="center">3</td>
            <td>March 7, 2013</td>
            <td>Birthday</td>
            <td>Get present</td>
        </tr>
    </tbody>
</table>
<br>
<button id="btnGet">GET</button>

JavaScript

$(document).ready(function () {

        $('#btnGet').click(function () {

            var TableData = new Array();

            $('#sampleTbl tr').each(function (row, tr) {
                TableData[row] = {
                    "taskNo": $(tr).find('td:eq(0)').text(),
                        "date": $(tr).find('td:eq(1)').text(),
                        "description": $(tr).find('td:eq(2)').text(),
                        "task": $(tr).find('td:eq(3)').text()
                }
            });
            TableData.shift(); // first row is the table header - so remov

            alert(JSON.stringify(TableData));

        });
    });