在 HTML 表格中,使用 jQuery 按列位置查找表格中的所有 TD 元素。首先,为表格中的每个列创建一个唯一的 class
属性,例如:col-1
、col-2
、col-3
等。然后,使用 jQuery 的 filter
函数和 cols
选择器,将表格中所有具有指定列类的 TD 元素筛选出来。
以下是一个示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 jQuery 按列位置查找表格中的所有 TD</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th class="col-1">名称</th>
<th class="col-2">年龄</th>
<th class="col-3">城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
<td>深圳</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').find('tr').each(function () {
var $tds = $(this).find('td');
var col1 = $tds.eq(0).text();
var col2 = $tds.eq(1).text();
var col3 = $tds.eq(2).text();
console.log("名称: " + col1 + ", 年龄: " + col2 + ", 城市: " + col3);
});
});
</script>
</body>
</html>
在此示例中,我们创建了一个简单的 HTML 表格,表格中含有三列:名称、年龄和城市。我们使用 jQuery 来查找表格中的所有 TD 元素,并打印出每个 TD 元素中的文本。
运行此示例代码,会在浏览器的开发者工具控制台中看到以下输出:
名称: 张三, 年龄: 25, 城市: 北京
名称: 李四, 年龄: 30, 城市: 上海
名称: 王五, 年龄: 22, 城市: 深圳
这表明,我们已经成功使用 jQuery 按列位置查找了表格中的所有 TD 元素。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云