javascript - 带有链接行的 JS 可排序表？

Question

好的，我有一张 table 。在此表中，我有一大堆列，我想使用可排序表 javascript，以便用户可以根据需要对表进行排序。有很多这样的 JS 脚本可用(即:http://tablesorter.com/docs/)

但是，我遇到的问题是，对于我想要排序的表格的每一行，在其正下方都有一个我不想排序的 colspan="4" 行。事实上，我希望这些行直接链接到它们上面的行，这样当这些行被排序时，它下面的 4-span 行会保持不变。

这样的事情可能吗？

table {
  border: 1px black solid;
  width: 100%;
}
thead {
  background-color: lightgrey;
  text-align: left;
}
.notes {
  text-align: right;
}

<table>
  <thead>
    <tr>
      <th>Command</th>
      <th>DMG</th>
      <th>EXE</th>
      <th>TOT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jouho Touken</td>
      <td>19</td>
      <td>17</td>
      <td>42</td>
    </tr>
    <tr>
      <td colspan="4" class="notes">Opponent crouching (H: Stagger)</td>
    </tr>
    <tr>
      <td>Chouyoushu</td>
      <td>25</td>
      <td>18</td>
      <td>46</td>
    </tr>
    <tr>
      <td colspan="4" class="notes">Damage varies due to distance (25-40)</td>
    </tr>
    <tr>
      <td>Tetsuzankou</td>
      <td>40</td>
      <td>19</td>
      <td>75</td>
    </tr>
    <tr>
      <td colspan="4" class="notes">Super Replay; Damage varies due to distance: 40-80</td>
    </tr>
  </tbody>
</table>

Answer 1

这是您如何执行此操作的示例。

• 将 <tbody> 中的所有行组成一个数组.
  • 将其分组。 [{data, note}, ...]
  • 按给定的排序函数排序
  • 展平成表格行的数组。
• 清空 <tbody>标签
• 插入 <tbody>标记排序表行数组中的所有内容。

var tableBody = document.querySelector('tbody')

var tableRows = Array
  .from(document.querySelectorAll('tbody > tr'))

var notesAndData = []
/* Group elements into
  [
    {data: <tr>, note: <tr>},
    ...
  ]
*/
for(var i = 1; i < tableRows.length; i += 2) {
  notesAndData.push({
    data: tableRows[i-1],
    note: tableRows[i]
  })
}

function flatten(arr) {
  return arr.reduce(function(acc, curr) {
    acc.push(curr.data)
    acc.push(curr.note)
    return acc
  }, [])
}

function repopulateTable(arr) {
  tableBody.innerHTML = ''
  arr.forEach(function(element) {
    tableBody.appendChild(element)
  })
}

function sortTable(sortingFunc) {
  /* Spread the notesAndData into a new array in 
     order to not modify it. This syntax is es6 */
  var sorted = [...notesAndData].sort(sortingFunc)
  repopulateTable(flatten(sorted))
}


function sortByDmg(ascending) {
  return function(a, b) {
    var aDmg = parseInt(a.data.children[1].textContent)
    var bDmg = parseInt(b.data.children[1].textContent)
    if (aDmg < bDmg) return ascending ? 1 : -1
    return ascending ? 1 : -1
  }
}

document
  .querySelector('.dmgSort')
  .addEventListener('click', function() {
    sortTable(sortByDmg(true))
  })

table {
  border: 1px black solid;
  width: 100%;
}
thead {
  background-color: lightgrey;
  text-align: left;
}
.notes {
  text-align: right;
}

<button class="dmgSort">Sort By DMG Ascending</button>

<table>
  <thead>
    <tr>
      <th>Command</th>
      <th>DMG</th>
      <th>EXE</th>
      <th>TOT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jouho Touken</td>
      <td>19</td>
      <td>17</td>
      <td>42</td>
    </tr>
    <tr>
      <td colspan="4" class="notes">Opponent crouching (H: Stagger)</td>
    </tr>
    <tr>
      <td>Chouyoushu</td>
      <td>25</td>
      <td>18</td>
      <td>46</td>
    </tr>
    <tr>
      <td colspan="4" class="notes">Damage varies due to distance (25-40)</td>
    </tr>
    <tr>
      <td>Tetsuzankou</td>
      <td>40</td>
      <td>19</td>
      <td>75</td>
    </tr>
    <tr>
      <td colspan="4" class="notes">Super Replay; Damage varies due to distance: 40-80</td>
    </tr>
  </tbody>
</table>