Element.appendChild 在 Chrome 上表现异常

Question

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

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 上它确实如此。

勾选 fiddle : http://jsfiddle.net/ppgab/nu0q62br/25/

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

Answer 1

textContent ....represents the text content of a node

为了对字符串进行排序，您需要使用 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 2

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

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

Answer 3

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

等于：return0
a < b: return 负数
b > a: return 邮编

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

Element.appendChild 在 Chrome 上表现异常

Element.appendChild behaving unexpectedly on Chrome

javascript

v8

ecmascript-5