Question

好的，我有一张桌子。在这个表中我有一大堆列，我想使用可排序表javascript，以便用户可以按照自己的意愿对表进行排序。有许多这样的JS脚本可用（即：http://tablesorter.com/docs/）

但是，我遇到的问题是，对于我想要排序的表格的每一行，它下面都有一个colspan="4"行，我不想排序。实际上，我希望这些行直接链接到它们上面的行，这样当这些行被排序时，它下面的4跨行就会粘在它上面。

这样的事情可能吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

JS可排序表与链接行？

1 个答案: