javascript遍历表
2023-09-27 14:25:21 时间
定义表结构
1. 通过id遍历
<html> <body> <table id="tb" border="1"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr> <tr> <td>row3,cell1</td> <td>row3,cell2</td> </tr> </table> <button type="button" onclick="f()">click me</button> <script> function f() { var t=document.getElementById("tb"); if (t) { for(var i=0; i< t.rows.length; i++) { for(var j=0; j<t.rows[i].cells.length; j++) { alert(t.rows[i].cells[j].innerText); } } } } </script> </body> </html>
2. 通过jQuery遍历
<html> <head> <meta charset="utf-8"> </head> <body> <table class="tb" border="1"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr> </table> <script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("td").each(function(){ alert($(this).text()); }) }) </script> </body> </html>
添加按钮,按按钮时弹出
<html> <head> <meta charset="utf-8"> </head> <body> <table class="tb" border="1"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr> </table> <button type="button">click me</button> <script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("td").each(function(){ alert($(this).text()); }) }) }) </script> </body> </html>
相关文章
- 【学习笔记23】JavaScript数组的遍历方法
- 浅理解JavaScript数组去重的方法(划重点),当面试官问如何实现数组去重时,你可以这样做...
- 精读JavaScript模式(六),Memoization模式与函数柯里化的应用
- 【javascript】 的严格模式 详解
- 《HTML5和JavaScript Web应用开发》——2.5 企业中的HTML5
- 《Windows 8 开发权威指南:HTML5 和JavaScript卷》——1.2 如何安装Visual Studio 2012
- JavaScript 数组遍历方法的对比
- JavaScript 数组遍历方法的对比
- 浅析Number.EPSILON及JavaScript中的数值误差问题
- JavaScript字符串转数字的5种方法及其陷阱
- JavaScript有这几种测试
- 用函数式编程对JavaScript进行断舍离
- 华为OD机试 -二叉树层次遍历(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- javascript中的正則表達式
- javaScript遍历对象、数组总结(转载)
- JavaScript引用类型之Object类型
- javascript面向对象的程序设计之Object.getOwnPropertyDescriptor()