jquery 获取当前行值 - Javascript (1)

📌 相关文章

📜 jquery 获取当前行值 - Javascript (1)

📅 最后修改于: 2023-12-03 14:43:18.732000 🧑 作者: Mango

jQuery 获取当前行值 - Javascript

在开发 Web 应用程序时，我们通常需要在表格或列表中获取用户选中的行的值。jQuery 提供了一种简单而强大的方式来实现这个目标。

实现方法

首先，在 HTML 中创建一个数据表格或列表。这里以数据表格为例，代码如下：

<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Johnson</td>
      <td>bob.johnson@example.com</td>
    </tr>
  </tbody>
</table>

使用 jQuery 选择器选中要用于触发事件的表格行。此处我们使用 .on() 方法添加事件处理程序，代码如下：

$(document).ready(function() {
  $('#myTable tbody tr').on('click', function() {
    // 获取当前行的值
  });
});

在事件处理程序中，使用 jQuery 选择器获取当前行的值。此处我们使用 .closest() 方法和 .find() 方法获取当前行的每个单元格的值，并将其存储到一个数组中。代码如下：

var rowData = $(this).closest('tr').find('td').map(function() {
  return $(this).text();
}).get();

最后，您可以将值存储在变量中，或者将其用于其他目的，如将它们添加到表单中。根据需要自行扩展到您的应用程序中。

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 获取当前行值 - Javascript</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>john.doe@example.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane Smith</td>
        <td>jane.smith@example.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Bob Johnson</td>
        <td>bob.johnson@example.com</td>
      </tr>
    </tbody>
  </table>
  <script>
    $(document).ready(function() {
      $('#myTable tbody tr').on('click', function() {
        var rowData = $(this).closest('tr').find('td').map(function() {
          return $(this).text();
        }).get();
        console.log(rowData);
      });
    });
  </script>
</body>
</html>

总结

以上介绍了如何使用 jQuery 获取当前行的值。这种方法简单实用，使用方便，可以帮助您更轻松地开发 Web 应用程序。