从 td jquery 获取 main tr - Javascript (1)

📌 相关文章

📜 从 td jquery 获取 main tr - Javascript (1)

📅 最后修改于: 2023-12-03 15:21:53.975000 🧑 作者: Mango

从 jQuery 中的 td 获取 main tr

在开发网络应用程序时，通过 jQuery 操作 DOM 是常见的任务之一。本文将介绍如何使用 jQuery 从 HTML 表格中获取 main tr。具体地说，我们将展示如何使用 jQuery 选择器从表格的 td 元素中访问 main tr。

步骤

在 HTML 页面中包含 jQuery 库文件。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

在 HTML 中添加一个表格，确保它包含一个带有 id 属性的 main tr。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email Address</th>
      <th>Phone Number</th>
    </tr>
  </thead>
  <tbody>
    <tr id="main">
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane@example.com</td>
      <td>555-5678</td>
    </tr>
  </tbody>
</table>

使用 jQuery 选择器从 td 元素中获取 main tr。

var $mainTr = $('#main').closest('tr');

使用 closest() 方法选择最接近的 tr 元素。由于 main tr 已经有一个 id 属性，我们可以使用 # 选择器来选择它。

示例

下面是一个完整的示例程序，它演示了如何使用 jQuery 从 td 元素中获取 main tr。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Get main tr from td using jQuery</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      var $mainTr = $('#main').closest('tr');
      $mainTr.css('background-color', 'yellow');
    });
  </script>
  <style>
    table {
      font-family: Arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email Address</th>
        <th>Phone Number</th>
      </tr>
    </thead>
    <tbody>
      <tr id="main">
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>555-1234</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>555-5678</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

结论

使用 jQuery 选择器可以轻松从表格的 td 元素中获取 main tr。在本文中，我们介绍了如何使用 closest() 方法选择最接近的 tr 元素。