淘先锋技术网

首页 1 2 3 4 5 6 7

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中显示行的操作上非常便利,只需要极少的代码量即可实现。