javascript - HTML 表格可按 ROW 而不是使用 JavaScript 的 COLUMN 排序？

Question

我正在使用 this code来自 W3Schools，用于通过单击列标题对所有表格行进行排序。正如预期的那样，这将按该 col 值对所有行进行排序。

我敢肯定这已经有人回答了，但我并不难过滤搜索结果以找到一种类似的方式(希望在纯 javascript 中)通过单击第一列行来对列进行排序。

这应该按点击的行值对所有列进行排序。

我希望有一些组合方法可以根据用户点击按列和行排序，但只是按行排序 方法就可以了。

提前致谢!

预期行为

未排序的表:

<table id="myTable">
  <tbody>
    <tr>
      <th onclick="sortTableRows(0)">Name</th>
      <th onclick="sortTableRows(1)">Col 1</th>
      <th onclick="sortTableRows(2)">Col 2</th>
      <th onclick="sortTableRows(3)">Col 3</th>
    </tr>
    <tr>
      <td onclick="sortTableCols(1)">Alan Brado</td>
      <td>2</td>
      <td>3</td>
      <td>1</td>
    </tr>
    <tr>
      <td onclick="sortTableCols(2)">Kevin Chuca</td>
      <td>1</td>
      <td>3</td>
      <td>2</td>
    </tr>
    <tr>
      <td onclick="sortTableCols(3)">Pamela Chu</td>
      <td>3</td>
      <td>2</td>
      <td>1</td>
    </tr> 
  </tbody>
</table>

NORMAL:按 COLUMN(列 1)排序的表格:

<table id="myTable">
  <tbody>
    <tr>
      <th onclick="sortTableRows(0)">Name</th>
      <th onclick="sortTableRows(1)">*Col 1*</th>
      <th onclick="sortTableRows(2)">Col 2</th>
      <th onclick="sortTableRows(3)">Col 3</th>
    </tr>
    <tr>
      <td onclick="sortTableCols(1)">Kevin Chuca</td>
      <td>1</td>
      <td>3</td>
      <td>2</td>
    </tr>
    <tr>
      <td onclick="sortTableCols(1)">Alan Brado</td>
      <td>2</td>
      <td>3</td>
      <td>1</td>
    </tr>
    <tr>
      <td onclick="sortTableCols(3)">Pamela Chu</td>
      <td>3</td>
      <td>2</td>
      <td>1</td>
    </tr> 
  </tbody>
</table>

DESIRED:按 ROW 排序的表格(Alan Brado):

<table id="myTable">
  <tbody>
    <tr>
      <th onclick="sortTableRows(0)">Name</th>
      <th onclick="sortTableRows(1)">Col 3</th>
      <th onclick="sortTableRows(2)">Col 1</th>
      <th onclick="sortTableRows(3)">Col 2</th>
    </tr>
    <tr>
      <td onclick="sortTableCols(1)">*Alan Brado*</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td onclick="sortTableCols(2)">Kevin Chuca</td>
      <td>2</td>
      <td>1</td>
      <td>3</td>
    </tr>
    <tr>
      <td onclick="sortTableCols(3)">Pamela Chu</td>
      <td>1</td>
      <td>3</td>
      <td>2</td>
    </tr> 
  </tbody>
</table>

这是我的代码片段:

function sortTableRows(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  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;
      }
    }
  }
}
function sortTableCols(n) {
  alert("This should sort cols by row #"+n+" values");
}

  /* Just for beauty */
  #myTable {
    border: none;
  }
  #myTable th {
    cursor: pointer;
    width: 5%;
    border: none;
    background-color: #e0e0e0;
  }
  #myTable tr td {
    border: none;
    border-bottom: 1px solid #aaa;
    text-align: center;
  }
  #myTable tr td:first-child {
    cursor: pointer;
    background-color: #e0e0e0;
    border-bottom: 1px solid #aaa;
    text-align: center;
  }
  #myTable tr:last-child td {
    border: none;
  }

<table id="myTable">
  <tbody>
    <tr>
      <th onclick="sortTableRows(0)">Name</th>
      <th onclick="sortTableRows(1)">Col 1</th>
      <th onclick="sortTableRows(2)">Col 2</th>
      <th onclick="sortTableRows(3)">Col 3</th>
    </tr>
    <tr>
      <td onclick="sortTableCols(1)">Alan Brado</td>
      <td>2</td>
      <td>3</td>
      <td>1</td>
    </tr>
    <tr>
      <td onclick="sortTableCols(2)">Kevin Chuca</td>
      <td>1</td>
      <td>3</td>
      <td>2</td>
    </tr>
    <tr>
      <td onclick="sortTableCols(3)">Pamela Chu</td>
      <td>3</td>
      <td>2</td>
      <td>1</td>
    </tr> 
  </tbody>
</table>

Answer 1

我经常问自己这个问题，但似乎从来没有真正需要它，所以再也没有问过。您的答案很好，但是在将数字作为字符串进行比较时会遇到问题。它不会显示在您的代码中，因为您使用的是 1, 2, 3 值。检查我的混合数据类型的片段，当然代码可以减少很多。

var dirc = 0, dirr = 0, cc = 0, rr = 0;
function colSlice(arr,ini=0,fin=0) {
  if (ini<0) ini = arr.length+ini;
  if (fin==0) fin = (arr.length+1)-ini;
  else fin = ini+fin
  var sliced = [];
  for (var i = 0; i < arr.length; i++) {
    sliced.push([]); 
    for (var j = 0; j < arr[i].length; j++) {
      if (j>=ini && j<fin)
        if (parseFloat(arr[i][j])>0 || arr[i][j]=="0")
          sliced[i].push(parseFloat(arr[i][j]));
        else 
          sliced[i].push(arr[i][j]);
    }
  }
  return sliced;
}
function colJoin(a,b) {
  var joined = [];
  for (var i = 0; i < a.length; i++) {
    joined.push([]); 
    for (var j = 0; j < a[i].length; j++) {
      joined[i].push(a[i][j]);
    }
    for (var j = 0; j < b[i].length; j++) {
      joined[i].push(b[i][j]);
    }
  }
  return joined;
}

function sortMatrix(a,b,x,d) {
  if (d<=0) var ret = [1,-1];
  else var ret = [-1,1];
  if (isNaN(a[x]) && isNaN(b[x])) {
    var ax = a[x].toLowerCase();
    var bx = b[x].toLowerCase();
  } else if (isNaN(a[x])) {
    return ret[0];
  } else if (isNaN(b[x])) {
    return ret[1];
  } else {
    var ax = parseFloat(a[x]);
    var bx = parseFloat(b[x]);
  }
  if (ax > bx) return ret[0];
  else if (ax < bx) return ret[1];
  else return 0;
}
function sortTable(r,c) {
  var table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("TR");
  var matriz = [];
  var m = null;
  // Get matrix from table
  for (i = 0; i < rows.length; i++) {
    if (i==0) cols = rows[i].getElementsByTagName("TH");
    else cols = rows[i].getElementsByTagName("TD");
    m = [];
    for (j = 0; j < cols.length; j++) {
      m.push(cols[j].innerHTML);
    }
    matriz.push(m);
  }
  if (r==0) { // sort rows by col
    if (c==cc) dirc = Math.abs(1-dirc);
    else dirc = 0;
    m = matriz[0];
    matriz = matriz.slice(1);
    matriz.sort(function(a, b){
      return sortMatrix(a,b,c,dirc);
    });
    matriz.unshift(m);
    cc = c;
  }
  if (c==0) { // sort cols by row
    if (r==rr) dirr = Math.abs(1-dirr);
    else dirr = 0;
    m = colSlice(matriz,0,1);
    matriz = colSlice(matriz,1);
    // Transpose matriz
    var newArray = matriz[0].map(function(co, i){
      return matriz.map(function(ro){
        return ro[i];
      });
    });
    // Sort
    newArray.sort(function(a, b){
      return sortMatrix(a,b,r,dirr);
    });
    // Transpose back
    matriz = newArray[0].map(function(co, i){
      return newArray.map(function(ro){
        return ro[i];
      });
    });
    matriz = colJoin(m,matriz);
    rr = r;
  }
  // Update values
  for (i = 0; i < rows.length; i++) {
    if (i==0) cols = rows[i].getElementsByTagName("TH");
    else cols = rows[i].getElementsByTagName("TD");
    for (j = 0; j < cols.length; j++) {
      cols[j].innerHTML = matriz[i][j];
    }
  }
}
function clicRow(e) {
  sortTable(0,parseInt(e.target.attributes.col.value));
}
var tds=document.querySelectorAll("#myTable tr td:first-child,#myTable tr th:first-child");
var len = tds.length;
for(var i=0; i< len; i++){
  tds[i].addEventListener('click', clicRow);
}
function clicCol(e) {
  sortTable(parseInt(e.target.attributes.row.value),0);
}
var tds=document.querySelectorAll("#myTable tr:first-child th");
var len = tds.length;
for(var i=1; i< len; i++){
  tds[i].addEventListener('click', clicCol);
}

  /* Just for beauty */
  #myTable {
    border: none;
  }
  #myTable th {
    cursor: n-resize;
    border: none;
    background-color: #e0e0e0;
  }
  #myTable th:first-child {
    cursor: move;
  }
  th, td {
    width: 5%;
  }
  #myTable tr td {
    border: none;
    border-bottom: 1px solid #aaa;
    text-align: center;
  }
  #myTable tr td:first-child {
    cursor: e-resize;
    background-color: #e0e0e0;
    border-bottom: 1px solid #aaa;
    text-align: center;
  }
  #myTable tr:last-child td {
    border: none;
  }

<table id="myTable">
  <tbody>
    <tr>
      <th row="0" col="0">Both</th>
      <th row="1">Col A</th>
      <th row="2">Col B</th>
      <th row="3">Col C</th>
      <th row="4">Col 4</th>
    </tr>
    <tr>
      <td col="1">Row A</td>
      <td>221</td>
      <td>2</td>
      <td>22</td>
      <td>22.2</td>
    </tr>
    <tr>
      <td col="2">Row B</td>
      <td>123</td>
      <td>1234</td>
      <td>ABA</td>
      <td>aba</td>
    </tr>
    <tr>
      <td col="3">Row C</td>
      <td>1</td>
      <td>12.04</td>
      <td>12.4</td>
      <td>ab</td>
    </tr> 
    <tr>
      <td col="4">Row 4</td>
      <td>123.2</td>
      <td>123.1</td>
      <td>acar</td>
      <td>acar</td>
    </tr> 
  </tbody>
</table>

更新:简化并删除了 onClick 调用。