JS表排序依据复选框_js 数组排序依据_JS排序表-排序指标 - 腾讯云开发者社区

JS表排序依据复选框

是指使用JavaScript对表格中的数据进行排序时，根据复选框的选中状态作为排序依据。具体实现方法如下：

首先，在HTML中创建一个表格，并在表头中添加一个复选框，用于选择排序依据。

<table id="myTable">
  <thead>
    <tr>
      <th><input type="checkbox" id="sortCheckbox"></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>Alice</td>
      <td>30</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Bob</td>
      <td>20</td>
      <td>UK</td>
    </tr>
  </tbody>
</table>

接下来，使用JavaScript获取表格和复选框的引用，并为复选框添加事件监听器。

var table = document.getElementById("myTable");
var sortCheckbox = document.getElementById("sortCheckbox");

sortCheckbox.addEventListener("change", function() {
  sortTable();
});

然后，编写sortTable函数，根据复选框的选中状态对表格进行排序。

function sortTable() {
  var rows = Array.from(table.getElementsByTagName("tr"));
  var isChecked = sortCheckbox.checked;

  rows.shift(); // 移除表头

  rows.sort(function(a, b) {
    var aValue = a.getElementsByTagName("td")[0].querySelector("input").checked;
    var bValue = b.getElementsByTagName("td")[0].querySelector("input").checked;

    if (isChecked) {
      return aValue - bValue; // 升序排序
    } else {
      return bValue - aValue; // 降序排序
    }
  });

  rows.forEach(function(row) {
    table.appendChild(row);
  });
}

以上代码实现了根据复选框的选中状态对表格进行升序或降序排序。当复选框选中时，表格按照复选框的选中状态进行升序排序；当复选框未选中时，表格按照复选框的选中状态进行降序排序。

这种排序方式适用于需要根据某个特定条件对表格数据进行排序的场景，例如根据复选框的选中状态对某些行进行筛选或排序。

腾讯云相关产品和产品介绍链接地址：