JavaScript script below will read through all rows and display text in cells of columns in a HTML table.
Assume we have a HTML table id=example-table like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <table cellspacing="0" cellpadding="4" id="example-table"> <tr style="color:White;background-color:#5D7B9D;font-weight:bold;"> <th scope="col">No</th> <th scope="col">Friend Name</th> <th scope="col">Job Position</th> <th scope="col">Company</th> <th scope="col">Website</th> </tr> <tr style="color:#333333;background-color:#F7F6F3;"> <td>1</td> <td>Hoan Huynh</td> <td>Developer</td> <td>4 Rapid Development</td> <td><a id='website_url_1' href='http://4rapiddev.com'>http://4rapiddev.com</a></td> </tr> <tr style="color:#284775;background-color:White;"> <td>2</td> <td>Hoan Huynh</td> <td>General Director</td> <td>OPSgreat</td> <td><a id='website_url_2' href='http://opsgreat.com/'>http://opsgreat.com/</a></td> </tr> </table> |
The HTML table is like this:
And we will display the table in another format from its rows and cells text, unordered HTML list for example.
JQuery Read Rows And Cells
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script type="text/javascript"> $(document).ready(function() { var table = document.getElementById('example-table'); var rowLength = table.rows.length; var FriendList = "<ul>"; var count = 0; for(var i=1; i<rowLength; i+=1){ count ++; var row = table.rows[i]; var FriendName = row.cells[1].innerHTML; var JobPosition = row.cells[2].innerHTML; var Company = row.cells[3].innerHTML; var WebsiteURL = document.getElementById('website_url_' + count); FriendList += "<li>" + FriendName + " is working for <a href='" + WebsiteURL + "'>" + Company + "</a> as " + JobPosition + "</li>"; } FriendList += "</ul>"; FriendList = "<p>We have: " + count + " friends in the list:</p>" + FriendList; $("#FriendList").html(FriendList); }); </script> |
And the result is
Full source code for reading all rows and cells
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo JQuery Read Rows And Columns Of HTML Table</title> <script src="//code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div id="FriendList"></div> <table cellspacing="0" cellpadding="4" id="example-table"> <tr style="color:White;background-color:#5D7B9D;font-weight:bold;"> <th scope="col">No</th> <th scope="col">Friend Name</th> <th scope="col">Job Position</th> <th scope="col">Company</th> <th scope="col">Website</th> </tr> <tr style="color:#333333;background-color:#F7F6F3;"> <td>1</td> <td>Hoan Huynh</td> <td>Developer</td> <td>4 Rapid Development</td> <td><a id='website_url_1' href='http://4rapiddev.com'>http://4rapiddev.com</a></td> </tr> <tr style="color:#284775;background-color:White;"> <td>2</td> <td>Hoan Huynh</td> <td>General Director</td> <td>OPSgreat</td> <td><a id='website_url_2' href='http://opsgreat.com/'>http://opsgreat.com/</a></td> </tr> </table> <script type="text/javascript"> $(document).ready(function() { var table = document.getElementById('example-table'); var rowLength = table.rows.length; var FriendList = "<ul>"; var count = 0; for(var i=1; i<rowLength; i+=1){ count ++; var row = table.rows[i]; var FriendName = row.cells[1].innerHTML; var JobPosition = row.cells[2].innerHTML; var Company = row.cells[3].innerHTML; var WebsiteURL = document.getElementById('website_url_' + count); FriendList += "<li>" + FriendName + " is working for <a href='" + WebsiteURL + "'>" + Company + "</a> as " + JobPosition + "</li>"; } FriendList += "</ul>"; FriendList = "<p>We have: " + count + " friends in the list:</p>" + FriendList; $("#FriendList").html(FriendList); }); </script> </body> </html> |