代码描述:js遍历迭代table表格 单元格。js遍历迭代table表格单元格代码实例
本章节介绍一下如何利用原生javascript遍历table表格中的每一个td单元格,下面就通过代码实例详细介绍一下如何实现此功能。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> .table{ width:300px; height:100px; border:1px solid #ccc; border-collapse:collapse; } .table td,.table th { border:1px solid #ccc; padding:5px; } </style> <script type="text/javascript"> function GetInfoFromTable(tableid){ var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var index = 0; index < tableObj.rows.length; index++) { for (var j = 0; j < tableObj.rows[index].cells.length; j++) { tableInfo += tableObj.rows[index].cells[j].innerHTML; tableInfo += " "; } tableInfo += "\\n"; } return tableInfo; } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ alert(GetInfoFromTable("tb")); } } </script> </head> <body> <table id="tb" class="table"> <thead> <tr> <th>51前端一</th> <th>51前端二</th> </tr> </thead> <tr> <td>javascript教程</td> <td>jQuery教程</td> </tr> <tr> <td>HTML教程</td> <td>div css教程</td> </tr> </table> <input type="button" id="bt" value="查看效果"/> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能