2017-05-27 2 views
0

enter image description herejavascriptでhtmlテーブルを並べ替えるには?

私は、複数のmysqlテーブルから複数のPHPコードで作成されたテーブルを持っています。

私はjavascriptの日付欄(第二TDの)によって、それをソートしたいです。

更新日:私は、ページの読み込みの日付列で自動的にソートされたテーブルを必要としています。 私はtheadsをクリックして再度ソートしたくありません。 これは私のページの唯一のテーブルではありません。だから私はどのテーブルをソートすべきかをjavascriptに伝える必要があります。

誰でも知っていますか?

+1

は、なぜあなたは、事前にサーバー側でそれをソートしませんか? –

+0

私は多くのmysqlテーブルから多くの選択クエリによってこのテーブルを作成するためです。選択クエリごとにTRを表示します。それは私が注文のクエリでそれを並べ替えることができない理由です。 –

+0

あなたが本当に 'tr' –

答えて

0

あなたはあなたのデータをサーバー側でページネーションを考慮する必要がない場合はjqueryのtablesorterを見ています。デモ右here。私は私の引き出しのキャビネットで、純粋なJSソリューションを持って

+0

質問が更新されました。 –

+0

ありがとうございますが、正確にソートしていません。日付列のDAY値によってソートされているため、一部の行だけが変更されています。合計日付ではありません。 –

+0

日付形式https://mottie.github.io/tablesorter/docs/example-option-date-format.html –

0

...

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
</head> 
 
    <style> 
 
     table{ 
 
      width: 500px; 
 
     } 
 

 
     th, td { 
 
     text-align: center; 
 
     min-width:200px; 
 
     } 
 

 
     td:nth-child(1), th:nth-child(1) { 
 
      min-width: 100px; 
 
     } 
 

 
     thead { 
 
      background-color: #000; 
 
      color: #fff; 
 
     } 
 

 
     thead tr { 
 
      display: block; 
 
      position: relative; 
 
     } 
 

 
    tbody { 
 
     display: block; 
 
     overflow: auto; 
 
     overflow-x:hidden; 
 
     width: 100%; 
 
     height: 100px; 
 
    } 
 

 
    tbody tr:nth-child(even) { 
 
     background-color: #dddddd; 
 
    } 
 

 
    </style> 
 
<body> 
 

 
<table> 
 
    <thead> 
 
     <tr> 
 
      <th>Nummer</th> 
 
      <th>Deutsch</th> 
 
      <th>Englisch</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>eins</td> 
 
      <td>one</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>zwei</td> 
 
      <td>two</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>drei</td> 
 
      <td>three</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>vier</td> 
 
      <td>four</td> 
 
     </tr> 
 
     <tr> 
 
      <td>5</td> 
 
      <td>fünf</td> 
 
      <td>five</td> 
 
     </tr> 
 
     <tr> 
 
      <td>6</td> 
 
      <td>sechs</td> 
 
      <td>six</td> 
 
     </tr> 
 
     <tr> 
 
      <td>7</td> 
 
      <td>sieben</td> 
 
      <td>seven</td> 
 
     </tr> 
 
     <tr> 
 
      <td>8</td> 
 
      <td>acht</td> 
 
      <td>eight</td> 
 
     </tr> 
 
     <tr> 
 
      <td>9</td> 
 
      <td>neun</td> 
 
      <td>nine</td> 
 
     </tr> 
 

 
    </tbody> 
 
</table>  
 

 
<script> 
 
    eval('var $=x($,_){return(_)?[].slice.call(zAll($)).forEach(_):z($)},$s=x(e,r,v){$(e,x(_){_.style[r]=v})},$o=x(e,v,f){$(e,x(_){_.addEventListener(v,f)})}'.replace(/x/g,"function").replace(/z/g,'document.querySelector')); 
 
    function colSort(a, colIndex){ 
 
     a.sort(sortFunction); 
 
     function sortFunction(a, b) { 
 
      if (a[colIndex] === b[colIndex]) { 
 
       return 0; 
 
      } 
 
      else { 
 
       return (a[colIndex] < b[colIndex]) ? -1 : 1; 
 
      } 
 
     } 
 
     return a; 
 
    } 
 
    var tableContent = [],count = 0; 
 
    $('tbody tr', function(_){ 
 
     tableContent[count]=[]; 
 
     var cols = _.querySelectorAll('td'); 
 
     for (i=0;i<cols.length;i++){ 
 
     tableContent[count][i]=cols[i].innerHTML; 
 
     } 
 
     count++; 
 
     }); 
 
    
 
    var sortCol=function(colToSort){ 
 
     var temp = []; 
 
      $('thead tr th', function(_){ 
 
      temp.push(_.innerHTML); 
 
      }) 
 
      //var cSort = temp.indexOf(this.innerHTML); 
 
      var newSort = colSort(tableContent,colToSort-1); 
 
      count =0; 
 
      $('tbody tr', function(_){ 
 
      var cols = _.querySelectorAll('td'); 
 
      for (i=0;i<cols.length;i++){ 
 
       cols[i].innerHTML=newSort[count][i]; 
 
      } 
 
      count++; 
 
     }); 
 
    } 
 
    sortCol(2); 
 
    
 
</script> 
 

 
</body> 
 
</html> 
 
    
 

+0

質問が更新されました。 –

+0

これは簡単なことですが、私のコードを変更しました。ソートする必要があるsortCol(2)またはColのみを呼び出します –

関連する問題