使用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元无门槛券

手把手带您无忧上云

使用jquery按列位置查找表中的所有td

使用 jQuery 按列位置查找表格中的所有 TD

相关·内容

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐