Read Data from an HTML Table using JavaScript

If you were still using an HTML <table> to display data on your web page, this article and its example will be invaluable. In a previous article, I explained how to dynamically convert JSON data to an HTML table using JavaScript. Now, sharing a simple script that demonstrates how to read data from an HTML table using JavaScript.

The Markup

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

<!DOCTYPE html>
<html>
<head>
    <title>Read Data from HTML Table using 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>
</html>

Here's the Script

<script>
  let showTableData = () => {
    document.getElementById('info').innerHTML = "";
    
    const myTab = document.getElementById('empTable');
    let rows = Array.from(myTab.rows).slice(1);	// ignore the header (1st row).
    
    // Loop through each row (after the header).
    Array.from(rows).forEach((row) => { 
      let rowValues = []; 

      Array.from(row.cells).forEach((cell) => { 
        info.innerHTML = info.innerHTML + ' ' + cell.innerHTML;     // add data
      }); 
      
      info.innerHTML = info.innerHTML + '<br />';	// add break tag.
    });
  }
</script>

Try it

When the button is clicked, the function will be triggered. I create a table object using the document.getElementById() method. Once the object is created, I can access all the properties of the table.

Next, the script loops through each row of the table, starting from the second row to skip the table header. The second loop gets the cell values and adds it to a container to display.

Read a Particular Column Data

You can extract data from a particular column only. For example, I want to get the age only for all the employees.

// Loop through each row.
Array.from(rows).forEach((row) => { 
    let age = row.cells[2];     // read values from 2nd column only.
      
    if (age) {
      info.innerHTML = info.innerHTML + ' ' + age.innerHTML;
    }
      
    info.innerHTML = info.innerHTML + '<br />';
});

Output: 37 and 29

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.

Example

<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>    
  let showTableData = () => {
    document.getElementById('info').innerHTML = ""; 
    let myTab = document.getElementById('empTable'); 
    const opt = document.getElementById("opt").value; 
    
    // using cellIndex.
    let index = document.getElementById(opt).cellIndex; 
    
    let rows = Array.from(myTab.rows).slice(1);	// ignore the header (1st row).
    Array.from(rows).forEach((row) => { 
      let col = row.cells[index];	// read values from column using the index.
      
      if (col) {
        info.innerHTML = info.innerHTML + ' ' + col.innerHTML;
      }

      info.innerHTML = info.innerHTML + '<br />';
    });
  }    
</script>
</html>