javascript遍历表
2015-06-21 18:15
661 查看
定义表结构
![](http://images0.cnblogs.com/blog2015/408927/201506/211511511231390.png)
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>
相关文章推荐
- 深入理解javascript之null和undefined
- 【JavaScript】——入门
- js正则表达式语法
- fastjson 使用方法
- jsp——学习篇:jsp文件的构成
- JSON之解析通过TouchJSON\SBJSON\JSONKit\NSJSONSeriliz...
- [LeetCode][JavaScript]Add Two Numbers
- swipe.js 2.0 轻量级框架实现mobile web 左右滑动
- [LeetCode][JavaScript]Median of Two Sorted Arrays
- js深入浅出(大纲)
- jsp——学习篇:建立第一个jsp程序
- position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,
- javascript错误处理与调试
- javascript学习笔记-4
- <jsp-config>标签使用详解
- JS(一)Prototype的使用
- js面向对象(一)
- js
- Jsoup做接口测试
- js三个关键对象(运行期)