使用jquery按列位置查找表中的所有td
使用 jQuery 按列位置查找表格中的所有 TD
在 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元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
