jQuery是现代前端开发不可或缺的一个重要工具,它的强大在于它能够简化开发人员的代码量,优化交互体验。在前端开发中,经常会用到表格(table)的展示,而遍历table中的行(tr)进行信息展示是一项常见的任务。下面,我们将介绍如何使用jQuery遍历table显示行的方法。
首先,在HTML中创建一个基本的table结构,每个
<table id="example"> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>New York</td> </tr> <tr> <td>Emily</td> <td>30</td> <td>Los Angeles</td> </tr> <tr> <td>Mark</td> <td>22</td> <td>Chicago</td> </tr> </tbody> </table>
接下来,在jQuery中遍历表格中的每一行(tr)并显示:
$(document).ready(function(){ $("#example tr").each(function(){ var name = $(this).find('td:eq(0)').html(); var age = $(this).find('td:eq(1)').html(); var city = $(this).find('td:eq(2)').html(); console.log(name,age,city); }); });
在以上代码中,我们使用了each()遍历了所有行(tr)并使用find()方法找到每个单元格的值,使用.html()方法获取行内每个单元格的内容。最后,通过console.log()方法将每行数据打印出来。
综上所述,jQuery在遍历table中显示行的操作上非常便利,只需要极少的代码量即可实现。