如何通过复选框选项对表格进行排序属性

Question

我是JavaScript新手，我有一个问题，我无法解决一段时间... 我需要对表格进行动态分类。在（借用）的代码是：

function sortTable(n) { 
     var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; 
     table = document.getElementById("myTable2"); 
     switching = true; 
     dir = "asc"; 

     while (switching) { 

     switching = false; 
     rows = table.getElementsByTagName("TR"); 
     for (i = 1; i < (rows.length - 1); i++) { 
      shouldSwitch = false; 
      x = rows[i].getElementsByTagName("TD")[n]; 
      y = rows[i + 1].getElementsByTagName("TD")[n]; 

      if (dir == "asc") { 
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { 
       shouldSwitch= true; 
       break; 
      } 
      } else if (dir == "desc") { 
      if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { 
       shouldSwitch= true; 
       break; 
      } 
      } 
     } 
     if (shouldSwitch) { 
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); 
      switching = true; 
      switchcount ++; 
     } else { 
      if (switchcount == 0 && dir == "asc") { 
      dir = "desc"; 
      switching = true; 
      } 
     } 
     } 
    } 

它正常工作与文字/数字值，但问题是，在表中的列的一个组成复选框。想法是按照排列方式对选中的复选框进行排序（/底部，取决于上升/下降的方向）。

我试图检查x.innerHTML.checked==true，但x.innerHTML.checked返回“未定义”，所以没有用处。

有什么建议吗？

Answer 1

如果x是复选框类型的DOM元素，则只需执行x.checked即可访问该复选框的布尔值。

例如：

document.getElementById('mycheckbox').checked; 
 
// will return true or false

<input id="mycheckbox" type="checkbox">

Answer 2

纯本地JavaScript您的for循环应该是这个样子：

for (i = 1; i < (rows.length - 1); i++) { 
    shouldSwitch = false; 
    x = rows[i].getElementsByTagName("TD")[n]; 
    y = rows[i + 1].getElementsByTagName("TD")[n]; 

    if (dir == "asc") { 
     if(x.querySelector("input[type=checkbox]") !== null) { // checkbox case 
      shouldSwitch = (x.querySelector("input[type=checkbox]").checked > y.querySelector("input[type=checkbox]").checked); 
     } else { 
      shouldSwitch= x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase(); 
     } 

    } else if (dir == "desc") { 
     if(x.querySelector("input[type=checkbox]") !== null) { 
      shouldSwitch = (x.querySelector("input[type=checkbox]").checked < y.querySelector("input[type=checkbox]").checked); 
     } else { 
      shouldSwitch= x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase(); 
     } 

    } 
    if (shouldSwitch) { 
     break; 
    } 
} 

随着x.querySelector（“输入[类型=复选框]“），您正在寻找之前选择的TD元素中的复选框，并且已将变量x放入。

x是一个节点对象，是网页DOM的一个元素。

querySelector返回一个节点对象，而不是返回简单文本的innerHTML。在简单的文本中，您无法轻松验证您的复选框已被选中。