Javascript 做簡單的Table Sorting

用 Javascript 作 Table Sorting

這裡寫 2 種自己的做法

第一種 w3schools

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Check if the two rows should switch place:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        // If so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark that a switch has been done: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

第二種 自己亂寫的

function sort_table(col){
     var i, j, arr = new Array(), arr2 = new Array();
     var table = document.getElementById("mytable");
     var rows  = table.rows;
     // 從 1 開始，因為 0 是欄位的標題 (th)) 
     for (i = 1; i < rows.length; i++) {
          // 得 TD 內 innerHTML，加 i 是因應 innerHTML 完全一樣的 CASE
          arr[i-1] = rows[i].getElementsByTagName("TD")[col].innerHTML.toLowerCase() + i;
          // 用 MAP 紀錄 
          arr2[arr[i-1]] = i;
     }
     arr.sort();
     // 利用 insertBefore 來重新排序
     // 缺點有可能會影響 map 裡存的 index
     // 所以要記錄以移動的 cell
     var index = new Array();
     for(i = 0; i < arr.length; i++){
          var offset = 0;
          // 看過往 cell 的移動是否會影響現在的 index
          for(j = 0; j < i; j++){
               if(arr2[arr[i]] < index[j])offset++;
          }
          rows[1].parentNode.insertBefore(rows[arr2[arr[i]]+offset], rows[1]);
          // 紀錄 cell
          index[i] = arr2[arr[i]];
     }
}

參考資料 :
https://www.w3schools.com/howto/howto_js_sort_table.asp