JavaScript 获取表格选中行 TD 值并分开存储 - 完整代码示例 - 常规

{"table": "<table id="myTable">\n \n \n \n Name\n Age\n Country\n \n \n \n \n <input type="checkbox">\n John\n 25\n USA\n \n \n <input type="checkbox">\n Jane\n 30\n Canada\n \n \n <input type="checkbox">\n Mike\n 35\n UK\n \n \n\n<button onclick="getSelectedRows()">Get Selected Rows","javascript": "function getSelectedRows() {\n var table = document.getElementById("myTable");\n var checkboxes = table.getElementsByTagName("input");\n var selectedRows = [];\n\n for (var i = 0; i < checkboxes.length; i++) {\n if (checkboxes[i].type === "checkbox" && checkboxes[i].checked) {\n var row = checkboxes[i].parentNode.parentNode; // 获取复选框所在行的tr元素\n var tds = row.getElementsByTagName("td");\n var rowData = [];\n\n for (var j = 1; j < tds.length; j++) { // 从第二个td开始，跳过复选框所在的td\n rowData.push(tds[j].innerHTML);\n }\n\n selectedRows.push(rowData);\n }\n }\n\n console.log(selectedRows); // 打印选中行的td值数组\n\n // 分开存储\n var names = [];\n var ages = [];\n var countries = [];\n\n for (var k = 0; k < selectedRows.length; k++) {\n names.push(selectedRows[k][0]);\n ages.push(selectedRows[k][1]);\n countries.push(selectedRows[k][2]);\n }\n\n console.log(names); // 打印选中行的Name值数组\n console.log(ages); // 打印选中行的Age值数组\n console.log(countries); // 打印选中行的Country值数组\n}","description": "本文详细介绍如何使用 JavaScript 从 HTML 表格中获取选中行的 TD 值，并将它们分别存储到不同的数组中。我们将提供一个完整的代码示例，并解释每个步骤的实现逻辑。通过学习本文，您将掌握以下知识点：\n\n* 如何使用 JavaScript 遍历表格中的复选框。\n* 如何根据复选框状态判断对应行是否被选中。\n* 如何获取选中行的所有 TD 元素。\n* 如何将 TD 元素的值分别存储到不同的数组中。\n\n通过本文的学习，您可以轻松地将表格中选中行的值提取并分类存储，为后续数据处理和展示提供便利。","keywords": "JavaScript, 表格, 选中行, TD 值, 分开存储, 代码示例, 数组, 数据提取, HTML 表格, 行数据, 获取数据, 表格操作, JavaScript 表格操作, 数据处理, 编程教程","content": "

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

HTML 代码：

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

JavaScript 代码：

<code class="language-javascript">function getSelectedRows() {\n  var table = document.getElementById("myTable");\n  var checkboxes = table.getElementsByTagName("input");\n  var selectedRows = [];\n\n  for (var i = 0; i < checkboxes.length; i++) {\n    if (checkboxes[i].type === "checkbox" && checkboxes[i].checked) {\n      var row = checkboxes[i].parentNode.parentNode; // 获取复选框所在行的 tr 元素\n      var tds = row.getElementsByTagName("td");\n      var rowData = [];\n\n      for (var j = 1; j < tds.length; j++) { // 从第二个 td 开始，跳过复选框所在的 td\n        rowData.push(tds[j].innerHTML);\n      }\n\n      selectedRows.push(rowData);\n    }\n  }\n\n  console.log(selectedRows); // 打印选中行的 td 值数组\n\n  // 分开存储\n  var names = [];\n  var ages = [];\n  var countries = [];\n\n  for (var k = 0; k < selectedRows.length; k++) {\n    names.push(selectedRows[k][0]);\n    ages.push(selectedRows[k][1]);\n    countries.push(selectedRows[k][2]);\n  }\n\n  console.log(names); // 打印选中行的 Name 值数组\n  console.log(ages); // 打印选中行的 Age 值数组\n  console.log(countries); // 打印选中行的 Country 值数组\n}

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

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

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

本示例代码展示了如何获取表格中选中行的 TD 值并分别存储到不同的数组中。您可以根据自己的需求进行修改和扩展，例如：\n* 存储其他列的值。\n* 处理不同表格结构的情况。\n* 将数据用于进一步的分析或展示。

希望本文能够帮助您更好地理解如何使用 JavaScript 获取表格中选中行的 TD 值，并将它们进行分类存储。