Question

我认为这是我的问题出现的地方。我已经让它与三列合作，但我不知道该去哪里排序多个。我确定它在这个功能部分。如果您需要更多信息，请与我们联系。

Answer 1

我有一个具有相同功能的网站，这是我使用的功能。这应该适用于所有桌子尺寸。

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("totemTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc"; 
  /*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.getElementsByTagName("TR");
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 2; 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")[n];
  y = rows[i + 1].getElementsByTagName("TD")[n];
  /*check if the two rows should switch place,
  based on the direction, asc or desc:*/
  if (dir == "asc") {
    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
      //if so, mark as a switch and break the loop:
      shouldSwitch= true;
      break;
    }
  } else if (dir == "desc") {
    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;
  //Each time a switch is done, increase this count by 1:
  switchcount ++; 
   } else {
      /*If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Answer 2

我在某个地方出了问题并且不确定在哪里，但我认为你的功能应该有效，但也许我输错了？＆＃39;

        var people, asc1 = 1,
        asc2 = 1,
        asc3 = 1,
        asc4 = 1,
        asc5 = 1,
        asc6 = 1,
        asc7 = 1,
        asc8 = 1,
        asc9 = 1,
        asc10 = 1,
        asc11 = 1,
        asc12 = 1;
    window.onload = function () {
        people = document.getElementById("people");
    }

function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
//Set the sorting direction to ascending:
dir = "asc"; 
/*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.getElementsByTagName("TR");
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 2; 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")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
  //if so, mark as a switch and break the loop:
  shouldSwitch= true;
  break;
}
} else if (dir == "desc") {
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;
//Each time a switch is done, increase this count by 1:
switchcount ++; 
} else {
  /*If no switching has been done AND the direction is "asc", set the 
direction to "desc" and run the while loop again.*/
  if (switchcount == 0 && dir == "asc") {
    dir = "desc";
    switching = true;
  }
}
}
}
</script>'

表格：

<table id="myTable">
<tr>
<th onclick="sort_table(people, 0, asc1); asc1 *= -1;asc2 = 1;asc3 = 1;asc4 
= 1;asc5 = 1;asc6 = 1;asc7 = 1;asc 8 = 1;asc 9 = 1;asc10 = 1;asc 11= 1;asc 
12 = 1;">Player ↕</th>
<th onclick="sort_table(people, 1, asc1); asc1 *= -1; asc2 = 1;asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">Team ↕</th>
<th onclick="sort_table(people, 2, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">Role ↕</th>
<th onclick="sort_table(people, 3, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">KDA ↕</th>
<th onclick="sort_table(people, 4, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">Kills ↕</th>
<th onclick="sort_table(people, 5, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">Deaths ↕</th>
<th onclick="sort_table(people, 6, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">Assists ↕</th>
<th onclick="sort_table(people, 7, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">KP(%) ↕</th>
<th onclick="sort_table(people, 8, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">CS(Total) ↕</th>
<th onclick="sort_table(people, 9, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">CS(p/m) ↕</th>
<th onclick="sort_table(people, 10, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">Gold(~total) ↕</th>
<th onclick="sort_table(people, 11, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; 
asc4 = 1; asc5 = 1; asc6 = 1; asc7 = 1; asc 8 = 1; asc 9 = 1; asc10 = 1; asc 
11= 1; asc 12 = 1;">Games Played ↕</th>


</tr>
</thead>
    <tbody id="people">

<tr>
  <td class="Player-cell">Anivia HD</td>
  <td class="Team-cell">Apox</td>
  <td class="Role-cell">Mid</td>
  <td class="KDA-cell">4.85</td>
  <td class="Kills-cell">31</td>
  <td class="Deaths-cell">29</td>
  <td class="Assists-cell">33</td>
  <td class="KP(%)-cell">62.25</td>
  <td class="CS(Total)-cell">1434</td>
  <td class="CS(p/m)-cell">6.30</td>
  <td class="Gold(~total)-cell">77</td>
  <td class="Games Played-cell">8</td>
</tr>
</table>

如何在html表中对多个列进行排序？我需要修改我认为对所有列进行排序的函数，

2 个答案: