多表格 获取复选框选中行的td值 并且分开存储

假设有一个包含复选框和表格的HTML页面，我们可以使用JavaScript来获取选中行的td值并进行分开存储。以下是一个示例的代码：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>John</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Jane</td>
      <td>30</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Mike</td>
      <td>35</td>
      <td>UK</td>
    </tr>
  </tbody>
</table>
<button onclick="getSelectedRows()">Get Selected Rows</button>

JavaScript代码：

function getSelectedRows() {
  var table = document.getElementById("myTable");
  var checkboxes = table.getElementsByTagName("input");
  var selectedRows = [];

  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type === "checkbox" && checkboxes[i].checked) {
      var row = checkboxes[i].parentNode.parentNode; // 获取复选框所在行的tr元素
      var tds = row.getElementsByTagName("td");
      var rowData = [];

      for (var j = 1; j < tds.length; j++) { // 从第二个td开始，跳过复选框所在的td
        rowData.push(tds[j].innerHTML);
      }

      selectedRows.push(rowData);
    }
  }

  console.log(selectedRows); // 打印选中行的td值数组

  // 分开存储
  var names = [];
  var ages = [];
  var countries = [];

  for (var k = 0; k < selectedRows.length; k++) {
    names.push(selectedRows[k][0]);
    ages.push(selectedRows[k][1]);
    countries.push(selectedRows[k][2]);
  }

  console.log(names); // 打印选中行的Name值数组
  console.log(ages); // 打印选中行的Age值数组
  console.log(countries); // 打印选中行的Country值数组
}

在上述示例中，我们首先通过getElementById获取表格元素，并通过getElementsByTagName获取所有复选框。然后，我们遍历复选框，如果复选框是选中状态，我们获取其父节点的父节点，即所在行的tr元素。然后，我们获取该行的所有td元素，并将其值存储在rowData数组中。最后，我们将rowData数组添加到selectedRows数组中。

然后，我们可以使用selectedRows数组进行进一步的处理。在示例中，我们将选中行的Name、Age和Country分别存储在names、ages和countries数组中。

请注意，上述示例假设每个选中行都有相同的td数量，并且Name、Age和Country分别位于第二、第三和第四个td中。如果实际情况有所不同，您可能需要根据实际情况进行相应的修改