javascript - JS根据文本内容自定义表格排序

Question

我已经为此努力了很长时间，但没有成功。我有一个生成的表，需要按文本内容重新构建和重新排序。

https://codepen.io/thebigragu/pen/pojyMaO

初始表格示例。

<table>
<thead>
<tr><th>Rank</th></tr>
<tr><th>ID</th></tr>
<tr><th>Pts</th></tr>
</thead>
<tbody>
<tr><td>雙黑鑽石合作夥伴</td></tr>
<tr><td>黃金合作夥伴</td></tr>
<tr><td>黑鑽石合作夥伴</td></tr>
</tbody>
</html>

我创建了一个具有正确排序顺序的数组:

var ranks = [
  "黑鑽石合作夥伴",
  "黃金合作夥伴",
  "雙黑鑽石合作夥伴"
]

我想基于字符串比较构建一个新表。我可以将表中的每个字符串与数组(具有正确的顺序)进行比较，但是当我创建新表时，顺序不会改变。

任何反馈表示赞赏。蒂!

Answer 1

你所做的是相反的，实际上你应该首先循环遍历 ranks 数组，然后遍历 tr 数组，因为 tr 依赖于 ranks (用于位置信息。)而不是相反

for(l = 0; l < ranks.length; l++){

    for (i = 0; i < tr.length; i++){

        let txt = tr[i].children[0].querySelector('a').textContent;

        if( ranks.indexOf(txt) == 0 ){

          var newIndex = ranks.indexOf(txt);
          table.appendChild(tr[i]);
          ranks.shift(); // pop the top item off ranks array
        }
    }
} 

这是它的工作原理

循环排名 --> 循环 tr

在每次内部循环迭代(tr)中，检查第 i 个 tr 项是否与 ranks 数组的第一个位置处的文本匹配

如果是，请将其粘贴到 <table id="resorted-table"> 中，并从 ranks 中删除顶部项目(这样您就可以在循环的后续运行中使用相同的逻辑)