jQuery DataTables 获取选中行的值

在本文中，我们将介绍如何使用jQuery DataTables插件来获取选中行的值。

什么是jQuery DataTables

jQuery DataTables是一款用于处理复杂HTML表格的强大插件。它提供了丰富的功能，使得在网页中展示、搜索、排序和分页大型数据集变得更加简单。

使用jQuery DataTables获取选中行的值

要获取选中行的值，我们需要使用DataTables的row()方法来获取选中的行，并通过遍历行来获得所需的数据。

下面是一个简单的示例，展示如何使用jQuery DataTables获取选中行的值：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>35</td>
      <td>Australia</td>
    </tr>
  </tbody>
</table>

<button id="getSelectedRowValues">Get Selected Row Values</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
 $(document).ready(function() { var table =$ ('#myTable').DataTable();

  $('#getSelectedRowValues').click(function() {
    var selectedRows = table.rows('.selected').data();

    selectedRows.each(function (index, rowData) {
      var name = rowData[0];
      var age = rowData[1];
      var country = rowData[2];

      console.log("Name: " + name + ", Age: " + age + ", Country: " + country);
    });
  });
});
</script>

在上述示例中，我们创建了一个包含数据的HTML表格，并使用jQuery DataTables将其转换为可交互的表格。我们还添加了一个按钮来获取选中行的值。

当用户点击”Get Selected Row Values”按钮时，我们使用rows('.selected').data()方法获取选中行的数据。然后，我们可以通过遍历选中的行数据，使用索引来获取每行中的特定单元格的值。

在控制台中，我们将打印每行的姓名（Name）、年龄（Age）和国家（Country）。