JS Sortierbare Tabellen mit verknüpften Zeilen?

Question

Okay, ich habe einen Tisch. In dieser Tabelle habe ich eine ganze Reihe von Spalten, und ich würde gerne eine Sortierung Tabellen Javascript verwenden, so dass der Benutzer die Tabelle nach ihren Wünschen sortieren kann. Es gibt viele solche JS-Skripts zur Verfügung (dh: http://tablesorter.com/docs/)

Allerdings habe ich das Problem, dass für jede Zeile meiner Tabelle, die ich sortiert, gibt es eine colspan="4" Zeile direkt darunter, die ich nicht sortiert werden möchte. Tatsächlich möchte ich, dass diese Zeilen direkt mit der Zeile über ihnen verknüpft sind, so dass, wenn diese Zeilen sortiert werden, die 4-Zeilen darunter bleiben.

Ist so etwas möglich?

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

Hier ist ein Beispiel dafür, wie Sie dies tun könnte.

• Erstellen Sie ein Array aller Zeilen in der <tbody>.
  • Gruppieren Sie es in Paare. [{data, note}, ...]
  • Sortieren nach einer gegebenen Sortierfunktion
  • Abflachen in ein Array von Tabellenzeilen.
• leer die <tbody> Tag
• Einfügen in das <tbody> Tag alles in der Array sortiert Tabellenzeilen.

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>