javascriptでテーブルのtbodiesをhtmlで並べ替える方法は？

私の職場でこの問題が発生しました。このテーブルが私にとって共通のテーブルではないと感じます。私は、ヘッダーの1つをクリックすると、このヘッダーのカテゴリからソートされたようにこのテーブルを並べ替える必要があります。javascriptでテーブルのtbodiesをhtmlで並べ替える方法は？

<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <table id="AirflightDetail"> 
 
     <thead> 
 
      <tr> 
 
       <th class="col-lg-2 text-center">Airline</th> 
 
       <th class="col-lg-2 text-center">Depart</th> 
 
       <th class="col-lg-2 text-center">Arrival</th> 
 
       <th class="col-lg-2 text-center">Duration</th> 
 
       <th class="col-lg-2 text-center">Price</th> 
 
      </tr> 
 
     </thead> 
 

 
     <tbody class="table-result-list"> 
 
      <tr> 
 
       <td class="text-center" min-width="87px"> 
 
        <span>Airline H</span> 
 
        <br> 
 
        <p>AH-999</p> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>18:30</strong> 
 
         <br> 
 
         <span>Singapore</span> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>19:45</strong> 
 
         <br> 
 
         <span>Bangkok</span> 
 
       </td> 
 
       <td class="text-center" min-width="65px"> 
 
         <strong>1hour 15m</strong> 
 
         <br> 
 
         <span>Direct </span> 
 
       </td> 
 
       <td class="text-right amount" min-width="77px"> 
 
         <strong>$273</strong> 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 

 
     <tbody class="table-result-list"> 
 
      <tr> 
 
       <td class="text-center" min-width="87px"> 
 
        <span>Airline K</span> 
 
        <br> 
 
        <p>AK-100</p> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>12:05</strong> 
 
         <br> 
 
         <span>Singapore</span> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>14:20</strong> 
 
         <br> 
 
         <span>Bangkok</span> 
 
       </td> 
 
       <td class="text-center" min-width="65px"> 
 
         <strong>2hour</strong> 
 
         <br> 
 
         <span>Direct </span> 
 
       </td> 
 
       <td class="text-right amount" min-width="77px"> 
 
         <strong>$273</strong> 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 

 
     <tbody class="table-result-list"> 
 
      <tr> 
 
       <td class="text-center" min-width="87px"> 
 
        <span>Airline X</span> 
 
        <br> 
 
        <p>AX-006</p> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>13:10</strong> 
 
         <br> 
 
         <span>Singapore</span> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>14:25</strong> 
 
         <br> 
 
         <span>Bangkok</span> 
 
       </td> 
 
       <td class="text-center" min-width="65px"> 
 
         <strong>1hour 15m</strong> 
 
         <br> 
 
         <span>Direct</span> 
 
       </td> 
 
       <td class="text-right amount" min-width="77px"> 
 
         <strong>$327</strong> 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</body> 
 
</html>

：私は例の航空会社では、ヘッダーのタイトルをクリックすると、テーブルが似航空会社から選別しまった

<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <table id="AirflightDetail"> 
 
     <thead> 
 
      <tr> 
 
       <th class="col-lg-2 text-center">Airline</th> 
 
       <th class="col-lg-2 text-center">Depart</th> 
 
       <th class="col-lg-2 text-center">Arrival</th> 
 
       <th class="col-lg-2 text-center">Duration</th> 
 
       <th class="col-lg-2 text-center">Price</th> 
 
      </tr> 
 
     </thead> 
 

 
     <tbody class="table-result-list"> 
 
      <tr> 
 
       <td class="text-center" min-width="87px"> 
 
        <span>Airline X</span> 
 
        <br> 
 
        <p>AX-006</p> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>13:10</strong> 
 
         <br> 
 
         <span>Singapore</span> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>14:25</strong> 
 
         <br> 
 
         <span>Bangkok</span> 
 
       </td> 
 
       <td class="text-center" min-width="65px"> 
 
         <strong>1hour 15m</strong> 
 
         <br> 
 
         <span>Direct</span> 
 
       </td> 
 
       <td class="text-right amount" min-width="77px"> 
 
         <strong>$327</strong> 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 

 
     <tbody class="table-result-list"> 
 
      <tr> 
 
       <td class="text-center" min-width="87px"> 
 
        <span>Airline H</span> 
 
        <br> 
 
        <p>AH-999</p> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>18:30</strong> 
 
         <br> 
 
         <span>Singapore</span> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>19:45</strong> 
 
         <br> 
 
         <span>Bangkok</span> 
 
       </td> 
 
       <td class="text-center" min-width="65px"> 
 
         <strong>1hour 15m</strong> 
 
         <br> 
 
         <span>Direct </span> 
 
       </td> 
 
       <td class="text-right amount" min-width="77px"> 
 
         <strong>$273</strong> 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 

 
     <tbody class="table-result-list"> 
 
      <tr> 
 
       <td class="text-center" min-width="87px"> 
 
        <span>Airline K</span> 
 
        <br> 
 
        <p>AK-100</p> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>12:05</strong> 
 
         <br> 
 
         <span>Singapore</span> 
 
       </td> 
 
       <td class="text-center" min-width="100px"> 
 
         <strong>14:20</strong> 
 
         <br> 
 
         <span>Bangkok</span> 
 
       </td> 
 
       <td class="text-center" min-width="65px"> 
 
         <strong>2hour</strong> 
 
         <br> 
 
         <span>Direct </span> 
 
       </td> 
 
       <td class="text-right amount" min-width="77px"> 
 
         <strong>$273</strong> 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</body> 
 
</html>

：例では私はこのhtmlコードを持っています

私はすでに多くのJavaScriptを見てきましたが、 tbodyの要素ですが、tbodyをソートできるJavaScriptは見たことがありません。どのように私はjavascriptとjqueryなしでそれを行うことができます

出典

2017-01-10 MaximalSnowman

[datatable]（https://datatables.net/）などのプラグインを使用できます –

ソートロジックについて説明できますか？ – Burimi

@Burimiそれは私がthead thの1つをクリックするときのように、テーブルはその時からソートされました。たとえば、私が航空会社をクリックすると、テーブルは航空会社から昇順でソートされました。テーブルは複数のtbodiesで構成されていて、そこに値が入っていました。そのような別のtbodiesから値をソートし、ソートされたtbodiesでテーブルを再作成します。 – MaximalSnowman

これに関係しているものがたくさんあります。

まず、イベントリスナーをすべてのアイテムに添付する必要があります。クリックすると、ソートアクションが実行されます。

var airFlightTable = document.querySelector("#AirflightDetail"); 

var tableHeaders = airFlightTable.querySelectorAll("thead tr th"); 

tableHeaders.forEach(function(tableHeader){ 

    tableHeader.addEventListener("click", onTableHeaderClick); 
});

クリックはあなたがすべてのtbodyのタグを集めてソート処理を開始し、そのDOMを操作起こります。

function onTableHeaderClick(event){ 

    var sortBy = event.currentTarget.innerHTML; 

    if(sortBy === 'Airline'){ 

    airFlightTable.querySelectorAll(".table-result-list").forEach(function(tableResultsLIst){ 

     var items = [].slice.call(tableResultsLIst.querySelectorAll("td")); 

     var sortedItems = items.sort(); //you can place your sort logic here and after you're done you have to replace items of current tbody with sorted ones 
    }); 
    } 
}

あなたにはいくつかの作業が残っていますが、この時点で問題はないはずです。ここにはJSBinとこの実装があります

出典

2017-01-10 09:37:17 Burimi

それは 'var th = document.getElementById（ 'AirflightDetail'）。getElementsByTagName（ 'th'）;' 'querySelector'と' querySelectorAll' ...ではなく、追加イベントのリスナーパート – nelek

あなたの助けてくれてありがとう@Burimi、私はまだこれを使用する方法を理解しようとしています。私は必要なことがたくさんあるようです。 – MaximalSnowman

@MaximalSnowmanそれを楽しむ:) – Burimi

javascriptでテーブルのtbodiesをhtmlで並べ替える方法は？

答えて

関連する問題