Read HTML table using JavaScript or jQuery

Read complete HTML table- rows & columns values using JavaScript/jQury. To understand this article, you should know about basics of HTML & JavaScript.

Read HTML table by its id attribute:
var table = document.getElementById('table_id');

Read rows count in the HTML table:
var row_count = table.rows.length;

Read columns count in the HTML table:
var col_count = table.rows[i].cells.length;


You can iterate to read all column values including headers:

for (var i = 0; i < table.rows.length; i++) 
{
var colmns= table.rows[i].cells;

for (var j = 0; j < colmns.length; j++) 
{
if (i == 0)
// Read column-header values:
table.rows[i].cells[j].children[0].innerText;
else
// Read column-rows values:
table.rows[i].cells[j].innerText;
}
}

.innerHtml - returns HTML element within the specified cell.


.innerText - returns text value within the specified cell.