Element.appendChild behaving unexpectedly on Chrome

Question

I'm testing this simple table sorting script :

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))

The magic is that it simply reappends the elements, not needing to create any new ones.

But, it is only working on Firefox, not Chrome.

On chrome it doesn't actually changes the order, while on firefox it does.

Check the fiddle : http://jsfiddle.net/ppgab/nu0q62br/25/

insertAdjacentElement doesn't work either : http://jsfiddle.net/ppgab/nu0q62br/26/

Are actually getting anything from: `[...t.tBodies[0].rows]`? Does `tBodies` collection work as a table for `rows[]` syntax? — zer00ne, Jan 30 '19 at 19:20
@zer00ne Not sure I follow your question, tBodies is just an array of tbody elements, and my table only has one body, and rows is just an array of tr elements — Mojimi, Jan 30 '19 at 19:21
`.rows` is suffixed to `tBodies`...? Also doesn't this: `[...tBodies[0]]` mean it's an array of one tbody?. — zer00ne, Jan 30 '19 at 19:22
What exactly is "*behaving unexpectedly*"? What does not work? Does it throw an exception? Does it lead to the wrong order? — Bergi, Jan 30 '19 at 19:27
How is this duplicate if I didn't even know that was the issue — Mojimi, Jan 30 '19 at 19:36

score 3 · Accepted Answer · answered Jan 30 '19 at 19:25

3

Make sure to write your compare function correctly, it needs to work like so:

Equal: return 0
a < b: return neg number
b > a: return pos number

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

answered Jan 30 '19 at 19:25

Shimmy568

503
2
8

1

Huh so I'm not supposed to return boolean? Doesn't explain why it works on firefox – Mojimi Jan 30 '19 at 19:27
Hey @Mojimi can't say how exactly it works in FireFox, it could be that they detect if it's a Boolean and if it is deal with it in a way that makes sense. Could be a legacy thing. If you change it to return a number as described above. – Shimmy568 Jan 30 '19 at 19:33
1

@Mojimi If you change the `<` to `-` it works as expected. – Matthew Page Jan 30 '19 at 19:36

gaetanoM · Answer 2 · 2019-01-30T19:32:40.697

0

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

In order to sort strings you need to use 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>

edited Jan 30 '19 at 19:32

answered Jan 30 '19 at 19:17

gaetanoM

41,594
6
42
61

Nope, you've just appended the rows outside the tbody and left tbody empty – Mojimi Jan 30 '19 at 19:20
@Mojimi You are right, Answer updated. – gaetanoM Jan 30 '19 at 19:21

score 0 · Answer 3 · answered Jan 30 '19 at 19:24

I think you can do something like that.

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 behaving unexpectedly on Chrome

3 Answers3