如何按復選框選中的屬性對表進行排序

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返回“undefined”，所以沒有用。

有什么建議嗎？

Answer 1

使用純本機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（“input [type = checkbox]”），您正在尋找之前選擇的TD元素中的復選框，並且您已將變量放入x中。

x是節點對象，是網頁DOM的元素。

querySelector返回一個節點對象而不是返回簡單文本的innerHTML。 在簡單文本中，您無法輕松驗證是否選中了復選框。

Answer 2

如果x是復選框類型DOM元素，那么只需執行x.checked以訪問復選框的布爾值。

例如：

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

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