如何使用条件复选框在材料表中应用排序

<table id="material-table">
  <thead>
    <tr>
      <th>材料名称</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>钢材</td>
      <td>100</td>
    </tr>
    <tr>
      <td>木材</td>
      <td>50</td>
    </tr>
    <tr>
      <td>玻璃</td>
      <td>200</td>
    </tr>
  </tbody>
</table>

<label>
  <input type="checkbox" id="sort-checkbox"> 升序排序
</label>

var checkbox = document.getElementById('sort-checkbox');
checkbox.addEventListener('change', function() {
  var table = document.getElementById('material-table');
  var rows = Array.from(table.getElementsByTagName('tr')).slice(1); // 跳过表头行

  // 根据复选框的状态确定升序或降序排序
  var ascending = checkbox.checked;

  rows.sort(function(a, b) {
    var aValue = Number(a.cells[1].textContent); // 假设数量在第二列
    var bValue = Number(b.cells[1].textContent);
    if (ascending) {
      return aValue - bValue; // 升序排序
    } else {
      return bValue - aValue; // 降序排序
    }
  });

  // 更新表格显示
  var tbody = table.getElementsByTagName('tbody')[0];
  rows.forEach(function(row) {
    tbody.appendChild(row);
  });
});