用js细分html表

时间:2019-04-20 04:15:45

标签: javascript html html5

我已经对html表进行了排序,我想进行一个子排序。似乎无法弄清楚我的代码出了什么问题,现在在这里停留了一段时间。 我正在尝试对第4列的表格进行排序,然后如果有相同的值,请按ID排序

let table = document.querySelector('tbody')
function sort() {

  let tr = table.children;
  let test1 = [...tr]
    .sort((a, b) => parseInt(b.children[3].innerHTML) - parseInt(a.children[3].innerHTML))
    .map(el => table.append(el));

  let test2 = [...tr]
    .sort((a, b) => {
        if (a.children[3].innerHTML === b.children[3].innerHTML)
          return parseInt(a.children[0].innerHTML) - parseInt(b.children[0].innerHTML)
      }
    })
.map(el => table.append(el));

};
==HTML==
<table class="table">
    <thead>
        <tr class='table_row'>
            <th>id</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>5</td>
            <td>data1</td>
            <td>jone</td>
            <td>170</td>
        </tr>
        <tr>
            <td>1</td>
            <td>data2</td>
            <td>josh</td>
            <td>170</td>
        </tr>
        <tr>
            <td>2</td>
            <td>data3</td>
            <td>adrian</td>
            <td>270</td>
        </tr>
        <tr>
            <td>8</td>
            <td>data4</td>
            <td>merry</td>
            <td>70</td>
        </tr>
    </tbody>
</table>

1 个答案:

答案 0 :(得分:1)

您需要在同一个排序函数中同时进行两个属性检查。如果您在另一个排序之后再调用一个排序,则最终将诉诸于您的列表,并且原始排序没有影响。如果您考虑一下,那是有道理的。一些您想要的伪代码。有更多紧凑/优雅的方法,但这可以说明您的工作。而且,如果您了解做两个,那么可以做三个,依此类推。

function sort(a,b){
    const firstPropCompare = a.first - b.first;
    If(firstPropCompare != 0) return firstPropCompare;
    const secondCompare = a.second - b.second;
    return secondCompare;
}