Question

我希望能够按类名对表中的行进行排序，以便所有具有类selected的行首先出现，rejected出现在最后。

为了澄清，我想改变这个

<table>
  <tbody>
    <tr><td><span class="selected">WAHEED</span></td></tr>
    <tr><td><span class="selected">DON</span></td></tr>
    <tr><td><span class="rejected">JACK</span></td></tr>
    <tr><td><span class="selected">MARK</span></td></tr>
    <tr><td><span class="rejected">GATEES</span></td></tr>
  </tbody>
</table>

这样的事情：

<table>
  <tbody>
    <tr><td><span class="selected">WAHEED</span></td></tr>
    <tr><td><span class="selected">MARK</span></td></tr>
    <tr><td><span class="selected">DON</span></td></tr>
    <tr><td><span class="rejected">JACK</span></td></tr>
    <tr><td><span class="rejected">GATEES</span></td></tr>
  </tbody>
</table>

请注意两个代码示例之间的顺序变化关于如何实现这个目标的任何想法？

Answer 1

这应该这样做：

＆＃13;

var rows = document.querySelectorAll('table.sorted tr');
for (i = 0; i < rows.length; i++) {
  if (rows[i].querySelector('span.rejected')) {
      rows[i].closest('tbody').appendChild(rows[i]);
      }
}

＆＃13;

<table class="sorted">
<tbody>
<tr><td> 1. </td><td><span class="selected">WAHEED</span></td></tr>
<tr><td> 2. </td><td><span class="selected">DON</span></td></tr>
<tr><td> 3. </td><td><span class="rejected">JACK</span></td></tr>
<tr><td> 4. </td><td><span class="selected">MARK</span></td></tr>
<tr><td> 5. </td><td><span class="rejected">GATEES</span></td></tr>
</tbody>
</table>

＆＃13;

它会在页面中<table>的所有sorted上运行，其中<tr>类的位置rejected包含最后一个MySQL类的范围（所以其他所有保持在上面）。随意修改它以满足您的需求，它非常直接。

Answer 2

你的意思是这样吗

 var people, asc1 = 1,
        asc2 = 1,
        asc3 = 1;
    window.onload = function () {
        people = document.getElementById("people");
    }

    function sort_table(tbody, col, asc) {
        var rows = tbody.rows,
            rlen = rows.length,
            arr = new Array(),
            i, j, cells, clen;
        // fill the array with values from the table
        for (i = 0; i < rlen; i++) {
            cells = rows[i].cells;
            clen = cells.length;
            arr[i] = new Array();
            for (j = 0; j < clen; j++) {
                arr[i][j] = cells[j].innerHTML;
            }
        }
        // sort the array by the specified column number (col) and order (asc)
        arr.sort(function (a, b) {
            return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 * asc);
        });
        // replace existing rows with new rows created from the sorted array
        for (i = 0; i < rlen; i++) {
            rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>";
        }
    }

http://codepen.io/_adamjw3/pen/pRaXBg

基于classname对表行进行分组

2 个答案: