我正在使用 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>最佳答案
我经常问自己这个问题，但似乎从来没有真正需要它，所以再也没有问过。您的答案很好，但是在将数字作为字符串进行比较时会遇到问题。它不会显示在您的代码中，因为您使用的是 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 调用。
关于javascript - HTML 表格可按 ROW 而不是使用 JavaScript 的 COLUMN 排序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50160377/