jquery 获得目标所在的tr

我整理的一些关于【数据】的项目学习资料（附讲解～～）和大家一起分享、学习一下：

 https://d.51cto.com/eDOcp1

如何使用 jQuery 获取目标所在的 <tr>

在网页开发中，我们经常需要从一个表格中获取数据。这里，我们将使用 jQuery 来实现这一目标。本文将逐步指导你如何使用 jQuery 获取目标元素所在的 <tr> 行，适合刚入行的小白。

整体流程

以下是完成这一任务的整体流程，它描述了从目标元素获取到目标行的步骤：

步骤	描述
第一步	确定目标元素
第二步	获取目标元素所在的父元素 <tr>
第三步	在控制台输出走的结果
第四步	自定义你的代码，实现相关功能

每一步的详细实现

第一步：确定目标元素

首先，你要明确哪个元素是你的“目标元素”。它可能是一个按钮、链接或任何可点击的元素。假设我们的目标元素是一个按钮，HTML 代码如下：

登录后复制

<table>
    <tr>
        <td>行 1</td>
        <td><button class="btn">点击我</button></td>
    </tr>
    <tr>
        <td>行 2</td>
        <td><button class="btn">点击我</button></td>
    </tr>
</table>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

在这个示例中，我们有一个表格，每一行都有一个按钮。我们要获取按钮所在的行。

第二步：获取目标元素所在的父元素 <tr>

接下来，我们需要获取目标元素所在的 <tr>。使用 jQuery 的 .closest() 方法可以方便地获取到最近的祖先元素。以下是实现代码：

登录后复制

$(document).ready(function() {
    // 给每个按钮绑定点击事件
    $(".btn").on("click", function() {
        // 获取当前点击的按钮
        const button = $(this);
        // 获取按钮所在的最近的 <tr> 行
        const parentRow = button.closest("tr");
        
        // 在控制台输出当前行内容
        console.log(parentRow.html());  // 输出当前行的 HTML
    });
});

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

代码说明：

• $(document).ready(function() {...});：确保整个页面都已加载完成后再执行代码。
• $(".btn").on("click", function() {...});：给所有 .btn 类的按钮添加点击事件处理。
• const button = $(this);：指向当前被点击的按钮。
• const parentRow = button.closest("tr");：获取按钮最近的 <tr> 祖先元素。
• console.log(parentRow.html());：在控制台输出当前行的 HTML 内容。

第三步：在控制台输出结果

在之前的代码中，我们已经在点击按钮时输出了所在的 tr 的 HTML。你可以通过打开浏览器的开发者工具 (F12) 查看控制台的输出结果。

第四步：自定义代码，实现相关功能

在实际开发中，你可能只想从指定的 <tr> 中提取特定的数据。可以使用 jQuery 的 .find() 方法获取某个单元格中的数据。示例代码如下：

登录后复制

$(document).ready(function() {
    $(".btn").on("click", function() {
        const button = $(this);
        const parentRow = button.closest("tr");
        
        // 假设我们要获取第一列的数据
        const firstColumnData = parentRow.find("td:first").text();
        
        // 在控制台输出获取的数据
        console.log("第一列的数据是: " + firstColumnData);
    });
});

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

代码说明：

• const firstColumnData = parentRow.find("td:first").text();：在获取到的行 (parentRow) 中，找到第一个 <td> 并获取其文本内容。

总结

通过以上步骤，我们已经学会了如何使用 jQuery 获取目标元素所在的 <tr> 行，并提取出其中的数据。这个过程帮助你理解 jQuery 的基本用法，掌握如何操作 DOM 元素，尤其是在表格数据处理时的应用。

正规开发中，注意做好异常处理，确保代码的健壮性。此外，你也可以根据需要扩展功能，比如利用 AJAX 将数据发送到服务器。

互动序列图

以下是实现过程的互动序列图，展示了用户与页面的交互：

希望这篇文章能帮助你掌握 jQuery 的基本操作，开启你前往网页开发的旅程！

整理的一些关于【数据】的项目学习资料（附讲解～～），需要自取：

 https://d.51cto.com/eDOcp1

原创作者: u_16213330 转载于: https://blog.51cto.com/u_16213330/11856248