首页 > 解决方案 > 使用随机值进行表排序

问题描述

我是 javascript/Html 的新手,我有一个包含我想要排序的值的标签。问题是我如何为列/行创建一个循环,以便它们可以保持相同的数量。

<html>
<head>
<script>
function Table() {
  var list, i, switching, b, shouldSwitch, attrib;
  list = document.getElementById("picks");
  attrib = document.getElementsByTagName("TD");
  switching = true;
   while (switching) {

    switching = false;
    b = list.getElementsByTagName("p");
    for (i = 0; i < (b.length - 1); i++) {

      shouldSwitch = false;
          if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
               shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
        attrib[i].parentNode.insertBefore(attrib[i + 1], attrib[i]);
              switching = true;
}
}
}
</script>
</head>
<body>


<button onclick="Table()">Sort</button>

<table id="picks">
    <tr>
        <td><p>Sam</p></td>
        <td><p>Leo</p></td>
        <td><p>Teo</p></td>
    </tr>
    <tr>
        <td><p>Ann</p></td>
        <td><p>Susan</p></td>
        <td><p>Sasha</p></td>
    </tr>
    <tr>
        <td><p>Yu</p></td>
        <td><p>Harry</p></td>
        <td><p>Katy</p></td>
    </tr>
</table>



</body>
</html>

我尝试为 document.getElementsByTagName("TR"); 制作一个 for 循环。并没有真正得到最终结果。我使用一列作为参数并重新排列整个表。

标签: javascripthtmlsorting

解决方案


您应该将数据存储在数组中,对它们进行排序并从数组中显示它们。

使用 JQuery 将使 DOM 操作更容易。

查看接受的答案: Print out Javascript array in table


推荐阅读