概述
遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展!
<!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>jQuery遍历Table表格的行和列</title> <script type="text/javascript" src="http://localhost/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#tab1 tr").each(function(rowIndex) { alert($(this).find("td").first().html()); }); }); </script> </head> <body> <table id="tab1" border="1" style="border-collapse:collapse;width:100%;"> <tr style="height:30px; font-weight:bold;" align="center"> <td>序号</td> <td>编制号</td> <td>姓名</td> <td>单位</td> <td>职位</td> </tr> <tr style="height:30px;" align="center"> <td>01</td> <td>BZ01</td> <td>张三</td> <td>编程入门</td> <td>软件工程师</td> </tr> <tr style="height:30px;" align="center"> <td>02</td> <td>BZ02</td> <td>张四</td> <td>网页设计</td> <td>软件设计师</td> </tr> <tr style="height:30px;" align="center"> <td>03</td> <td>BZ03</td> <td>张五</td> <td>软件工程</td> <td>软件工程师</td> </tr> <tr style="height:30px;" align="center"> <td>04</td> <td>BZ04</td> <td>张六</td> <td>数据库教程</td> <td>数据库设计师</td> </tr> <tr style="height:30px;" align="center"> <td>05</td> <td>BZ05</td> <td>张七</td> <td>网络技术</td> <td>测试人员</td> </tr> </table> </body> </html>
如果出现没有效果的同学,请检查 jquery.min.js 路径引用是否正确!
转载于:https://www.cnblogs.com/xiaxue168/p/10638896.html
最后
以上就是顺利曲奇为你收集整理的jQuery遍历Table表格的行和列的全部内容,希望文章能够帮你解决jQuery遍历Table表格的行和列所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。