Question

我正在测试这个简单的表排序脚本：

t = document.getElementById('myTable');
[...t.tBodies[0].rows]
.sort( (a,b) => a.cells[0].textContent > b.cells[0].textContent)
.forEach(r => t.tBodies[0].appendChild(r))

神奇之处在于，它只是重新添加了元素，而无需创建任何新元素。

但是，它只能在Firefox上运行，而不能在Chrome上运行。

在chrome上，它实际上不会改变顺序，而在Firefox上，它确实会改变顺序。

检查小提琴：http://jsfiddle.net/ppgab/nu0q62br/25/

insertAdjacentElement也不起作用：http://jsfiddle.net/ppgab/nu0q62br/26/

Answer 1

确保正确编写您的比较函数，它需要像这样工作：

等于：返回0
a
b> a：返回pos号

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

textContent ....代表节点的文本内容

要对字符串进行排序，您需要使用localeCompare()

t = document.getElementById('myTable');
[...t.tBodies[0].rows]
    .sort((a,b) => a.cells[0].textContent.localeCompare(b.cells[0].textContent))
    .forEach(r => t.tBodies[0].appendChild(r))

<table id="myTable">
    <thead>
    <tr>
        <th scope="col">Number</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    </tbody>
</table>

Answer 3

我认为您可以做类似的事情。

var table = document.querySelector('#myTable');

var values = [...table.querySelectorAll('td')].map(item => item.innerHTML).sort((a,b) => a - b);

table.querySelector('tbody').innerHTML = '';
values.forEach(item => table.querySelector('tbody').innerHTML += `<tr><td>${item}</td></tr>`)

        <table id="myTable">
            <thead>
                <tr>
                    <th scope="col">Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>3</td>
                </tr>
                <tr>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
        
        This table should be in order

Element.appendChild在Chrome上的行为异常

3 个答案: