对表格进行排序但表格标题已损坏

Question

我正在为我的 Minecraft 服务器创建一个帮助部分，以便玩家可以查看命令及其用法。 我对它们进行了排序，以便在尝试查找命令时更有意义。

由于某种原因，它通过 Cmds 组织表格，但将表格标题放在底部。 我如何让它跳过这个？ 由于某种原因，还有一个空白条目。

<table id="cmdlist">
    <tr>
        <th>Command</th>
        <th><i style="color: rgb(0,255,255);">Tuple</i> Arguments</th>
        <th>Usage</th>
        <th>Server(s)</th>
        <th>Rank</th>
    </tr>
    <td>
    </td>
</table>
<script type="text/javascript">
    var Cmds,Args,Usage,Server,Rank;
    Cmds = ["/server","/msg","/r","/island,/is","/towny,/t","/nation,/n","/echest","/craft,/wb,/workbench","/tpa","/tpahere","/tpaccept"];
    Args = ["(servername)","(playname) (message)","(message)","(optional)","(optional)","(optional)","N/A","N/A","(playername)","(playername)","N/A"]
                Usage = ["Used to switch between the hub and gamemodes.",
                "Used to send a pm to a player.",
                "Sends a pm to the player you last sent/recieved a pm from.",
                "Without args opens gui. With args open a specific section.",
                "Without args displays town info. With args you can config your town.",
                "Without args displays nation info. With args you can config your nation.",
                "Open your enderchest via a command.",
                "Open a crafting table via a command.",
                "Sends a request to teleport to a player.",
                "Sends a request to teleport to a player to you.",
                "Accepts the last pending teleport request."
                ]
    Server = ["*","*","*","Skyblock","Towny","Towny","Towny/Skyblock","Towny/Skyblock","Towny/Skyblock","Towny/Skyblock","Towny/Skyblock"]
    Rank = ["*","*","*","* (Skyblock owner)","* (Town owner)","* (Town owner)","Donator,Donator+,DonatorPro,*Staff","Donator,Donator+,DonatorPro,*Staff","*","*","*"]
    Cmds.sort()
    Cmds.reverse()
    console.log(Cmds)
    var table = document.getElementById("cmdlist");
    var I;
    for (i = 1; i < Cmds.length; i++) {
        // Create an empty <tr> element and add it to the 1st position of the table:
        var row = table.insertRow(0);

        // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);

        // Add some text to the new cells:
        cell1.innerHTML = Cmds[i];
        cell2.innerHTML = Args[i];
        cell3.innerHTML = Usage[i];
        cell4.innerHTML = Server[i];
        cell5.innerHTML = Rank[i];
    }
</script> 

Answer 1

table.insertRow(0) 会将您的行添加到表格的开头，将之前的所有行向下推（包括您的表格标题）。你的意思是table.insertRow(-1) 会在表格的end 中添加一行吗？

insertRow reference

Answer 2

在您的代码中，您只对第一列进行排序.. 可以吗？

   const Cmds = [
       "/server",
       "/msg",
       "/r",
       "/island,/is",
       "/towny,/t",
       "/nation,/n",
       "/echest",
       "/craft,/wb,/workbench",
       "/tpa",
       "/tpahere",
       "/tpaccept"
   ];
   const Args = [
       "(servername)",
       "(playname) (message)",
       "(message)",
       "(optional)",
       "(optional)",
       "(optional)",
       "N/A",
       "N/A",
       "(playername)",
       "(playername)",
       "N/A"
   ];
   const Usage = [
       "Used to switch between the hub and gamemodes.",
       "Used to send a pm to a player.",
       "Sends a pm to the player you last sent/recieved a pm from.",
       "Without args opens gui. With args open a specific section.",
       "Without args displays town info. With args you can config your town.",
       "Without args displays nation info. With args you can config your nation.",
       "Open your enderchest via a command.",
       "Open a crafting table via a command.",
       "Sends a request to teleport to a player.",
       "Sends a request to teleport to a player to you.",
       "Accepts the last pending teleport request."
   ];
   const Server = [
       "*",
       "*",
       "*",
       "Skyblock",
       "Towny",
       "Towny",
       "Towny/Skyblock",
       "Towny/Skyblock",
       "Towny/Skyblock",
       "Towny/Skyblock",
       "Towny/Skyblock"
   ];
   const Rank = [
       "*",
       "*",
       "*",
       "* (Skyblock owner)",
       "* (Town owner)",
       "* (Town owner)",
       "Donator,Donator+,DonatorPro,*Staff",
       "Donator,Donator+,DonatorPro,*Staff",
       "*",
       "*",
       "*"
   ];

   Cmds.sort().reverse();
   var table = document.getElementById("cmdlist");
   for (let i = 0; i < Cmds.length; i++) {
       var row = table.insertRow(i+1);
       [
        Cmds,
        Args,
        Usage,
        Server,
        Rank
      ].forEach((column, index) => {
        row.insertCell(index).innerHTML = column[i]
      })
  }

table, th, td {
  border: 1px dotted #cdcdcd;
}

tr:nth-child(even) {
  background: #eee
}
tr:nth-child(odd) {
  background: #FFF
}

th {
  background-color: #000;
  color: white;
}

<table id="cmdlist">
    <tr>
        <th>Command</th>
        <th><i style="color: rgb(0,255,255);">Tuple</i> Arguments</th>
        <th>Usage</th>
        <th>Server(s)</th>
        <th>Rank</th>
    </tr>
</table>