How to retrieve HTML table data on button click Javascript
Example table
Smaple code
<button id="SearchButton" class="btn btn-primary">Search</button>
This sample code.
HTML
<!DOCTYPE html> <html> <head> <title>Read Data from HTML Table uisng JavaScript</title> </head> <body> <table role="grid" class="test" style="display:none;"> <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() { var info = document.getElementById('info'); info.innerHTML = ""; var myTab = document.getElementsByClassName('test'); // 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>
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.