자바 스크립트로 테이블 정렬 만

Question

간단한 방법으로 클릭 한 번에 3 열의 테이블에 대해이 함수를 작동 시키려면 어떻게해야합니까? 그리고 사용자가 다시 th를 클릭하면 테이블이 자손으로 정렬됩니다. jQuery가 허용하거나 다른 라이브러리가 없습니다.

function sortData() { 
    var tableData = document.getElementById('data_table').getElementsByTagName('tbody').item(0); 
    var rowData = tableData.getElementsByTagName('tr'); 
    for (var i = 0; i < rowData.length - 1; i++) { 
     for (var j = 0; j < rowData.length - (i + 1); j++) { 
      if (parseInt(rowData.item(j).getElementsByTagName('td').item(0).innerHTML) > parseInt(rowData.item(j + 1).getElementsByTagName('td').item(0).innerHTML)) { 
       tableData.insertBefore(rowData.item(j + 1), rowData.item(j)); 
      } 
     } 
    } 
} 

Answer 1

나는 JQuery와 전에 심지어 (내가 생각하는) 존재, 천 년 전 같은 테이블을 정렬이 기능을 썼다 :

function tableSort(table, column, initrow, lastrow, descending){ 
    var value1, value2; 
    var tbl = document.getElementById(table); 
    for(i = initRow;i < lastRow;i++){ 
     x = i; 
     for(j = i+1;j < lastRow + 1;j++){ 
      value1 = tbl.rows[j].cells[column].innerHTML.toLowerCase().replace(',','.'); 
      value2 = tbl.rows[x].cells[column].innerHTML.toLowerCase().replace(',','.'); 
      if(!isNaN(value1)){ 
       value1 = parseFloat(value1); 
       value2 = parseFloat(value2); 
      } 
      if(!descending && value1 < value2){x = j;} 
      else{ 
       if(descending && value1 > value2){x = j;} 
      } 
     } 
     tbl.tBodies[0].insertBefore(tbl.rows[x], tbl.rows[i]); 
    } 
} 

---

테이블 : 정렬 할 테이블의 id

열 : 행이 정렬로 시작되는 : 당신이

initrow을 정렬 할 열의 인덱스

lastrow :

<table id='mytable'> 
    <th>my first column</th> 
    <th desc='false' onclick='tableSort("myTable", 2, 1, 10, this.desc)'>my second column</th> 
    <tbody> <!-- important!!!! --> 
     <tr>... etc ...</tr> 
    </tbody> 
</table> 

Answer 2

내가 제안 :

---

예를 정렬 방향을 (당신이 다른 곳에서 설정을 전환 할 수있는 부울 값) :

내림차순으로 정렬하려면 어떻게 열 마무리 당신은 jQuery 플러그인을 실행합니다 : dataTable. 테이블을 정렬하는 데 정말 도움이되며 앞으로 필요할 수도있는 기능이 추가되었습니다. : D 도움이되기를 바랍니다. :) 여기에 링크 : http://www.datatables.net/