チェックボックスで表をソートする方法チェックされた属性

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; 
      } 
     } 
     } 
    } 

、テキスト/数値とうまく動作するが、問題は、テーブルの列のいずれかがチェックボックスで構成されていることです。そして、考えられるのは、チェックされたチェックボックスを持つ行が上になるようにテーブルをソートすることです（昇順/降順に応じて/ bottom）。

x.innerHTML.checked==trueを確認しようとしましたが、x.innerHTML.checkedは「未定義」を返していますので使用しません。

お願いします。

Answer 1

xがチェックボックスタイプのDOM要素の場合、チェックボックスのブール値にアクセスするには、x.checkedを実行します。例えば

：x.querySelector（ "入力[タイプ=で

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; 
    } 
} 

：あなたのforループは次のようになりますjavascriptの純粋なネイティブで

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

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

Answer 2

チェックボックス]）、あなたは前に選択したTD要素のチェックボックスを探していて、変数xを入れています。

xはノードオブジェクトで、ウェブページのDOMの要素です。

querySelectorは、単純なテキストを返すinnerHTMLではなくノードオブジェクトを返します。簡単なテキストでは、チェックボックスがオンになっていることを簡単に確認できません。