How to Read Data from an HTML Table using JavaScript – Quick Tip

If you were still using an HTML <table> to show data on your web page, this post and its example would be useful. Earlier on this blog I have submitted an article on how to convert JSON data dynamically to an HTML table using JavaScript . I am extending that post and here I am sharing with you a simple script showing how to read data from HTML table using JavaScript.

In this example, I am not going to elaborate on the JSON part. However, I’ll create a small table with header and add few rows to it.

The Markup
<!DOCTYPE html>
<html>
<head>
    <title>Read Data from HTML Table uisng JavaScript</title>
    <style>
        th, td, p, input {
            font:14px Verdana;
        }
        table, th, td {
            border:solid 1px #999;
            padding:2px 3px;
            text-align:center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <table id="empTable">
        <tr>
            <th>ID</th>
                <th>Employee Name</th>
                    <th>Age</th>
        </tr>
        <tr>
            <td>01</td>
                <td>Alpha</td>
                    <td>37</td>
        </tr>
        <tr>
            <td>02</td>
                <td>Bravo</td>
                    <td>29</td>
        </tr>
    </table>

    <p><input type="button" id="bt" value="Show Table Data" onclick="showTableData()" /></p>
    <p id="info"></p>
</body>
The Script
<script>
    function showTableData() {
        document.getElementById('info').innerHTML = "";
        var myTab = document.getElementById('empTable');

        // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
        for (i = 1; i < myTab.rows.length; i++) {

            // GET THE CELLS COLLECTION OF THE CURRENT ROW.
            var objCells = myTab.rows.item(i).cells;

            // LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
            for (var j = 0; j < objCells.length; j++) {
                info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML;
            }
            info.innerHTML = info.innerHTML + '<br />';     // ADD A BREAK (TAG).
        }
    }
</script>
</html>

It will call the function when someone hits the button. I am creating an object of the table using document.getElemnentById() method. Once the object is created, I now have access to all the properties of the table.

Next, I am running a for loop to read each row of the table. However, I am ignoring the first row, since it has the table header. Therefore, in the for loop, I have assigned value 1 to the variable i.

Later inside the first loop, I’ll get the cells collection of each row. The collection (object) provides the properties and values of each cell in a row. To extract values from each cell, I am running another for loop.

Read a Particular Column Data

If you want to extract data from a particular column, then you can simply assign value to the variable j in the second loop. Each column or <th> has a unique index value starting from 0.

For example, if you want to show values of column Age, then you can assign value 2 to the variable j. Like this,

for (var j = 2; j < objCells.length; j++) {
    info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML;
}

The output you get is 37 and 29 (from the above example).

Read Column Data using “cellIndex” Property

There’s another way you can get cell values for a particular column, without hard coding a number. You can assign unique id’s to each header (<th>) in the markup and get the index values using the document.getElemnentById() method.

The Markup
<tr>
    <th id="id">ID</th>
        <th id="emp">Employee Name</th>
            <th id="age">Age</th>
</tr>
The Script
var index = document.getElementById("emp").cellIndex;

for (var j = index; j <= index; j++) {
    info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML;
}

Try it yourself

IDEmployee NameAge
01Alpha37
02Bravo29
03Charlie32

Well that’s it. Hope you find the examples and post useful. You can further simply the process using jQuery. However, in this post I have tried to focus on JavaScript. It is also simple.

Thanks for reading.

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts:

Join our Google Plus Community and be a part of a discussion!