如何通過複選框選項對錶格進行排序屬性

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。在簡單的文本中，您無法輕鬆驗證您的複選框已被選中。