Read Data from an HTML Table using JavaScript

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

First, I'll create a small table with header and few rows in it. The data is hardcoded.

The Markup

<!DOCTYPE html>
<html>
<head>
    <title>Read Data from HTML Table uisng JavaScript</title>
    <style>
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            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>

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

Try it

It will call the function when someone hits the button. I am creating an object of the table using document.getElementById() method. Once the object is created, I' ll 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.getElementById() method.

The Markup

<html>
<head>
    <title>Read Data from HTML Table uisng JavaScript</title>
    <style>
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>

<body>
    <table id="empTable">
        <tr>    
            <th id="id">ID</th>
                <th id="emp">Employee Name</th>
                    <th id="age">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>
        <tr><td>03</td><td>Charlie</td><td>32</td></tr>
    </table>

    <p><select name="select" id="opt">
        <option value="">--Select a Value--</option>
        <option value="id">ID</option>
        <option value="emp">Employee Name</option>
        <option value="age">Age</option></select>
    </p>

    <input type="button" id="bt" value="Show Data" onclick="showTableData()" />
    <p id="info" style="font-style:italic;"></p>
</body>

<script>    
    function showTableData() { 
        document.getElementById('info').innerHTML = ""; 
        var myTab = document.getElementById('empTable'); 
        var opt = document.getElementById("opt").value; 
        var index = document.getElementById(opt).cellIndex; 
        
        for (i = 1; i < myTab.rows.length; i++) { 
            var objCells = myTab.rows.item(i).cells; 
            
            for (var j = index; j <= index; j++) { 
                info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML; 
            } 
            
            info.innerHTML = info.innerHTML + '<br />'; 
        } 
    }
</script>
</html>

Try it

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.

← PreviousNext →

Read Data from an HTML Table using JavaScript – Quick Tip

Read a Particular Column Data

Read Column Data using "cellIndex" Property