Javascript-форум - Фильтрация таблицы по селектам

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Фильтрация таблицы по селектам (https://javascript.ru/forum/dom-window/72525-filtraciya-tablicy-po-selektam.html)

рони,
вот примерно так. Правда и некогда, и лень писать, поэтому по проще и работать будет только в браузере поддерживающем Object.entries().

<html>
<head>
<style>
table {
    border-collapse: collapse;
    margin: 20px auto;
}

td, th {
    border: 1px solid #ddd;
    padding: 5px;
}

th {
    cursor: default;
    padding: 6px;
    background: #eee;
}
</style>
</head>
<body>
<table>
<tr>
 <th id="0">Col 1</th>
 <th id="1">Col 2</th>
 <th id="2">Col 3</th>
 <th id="3">Col 4</th>
</tr>
<tr><td>7.5</td><td>abcd</td><td>120</td><td>230</td></tr>
<tr><td>.5</td><td>txt</td><td>200</td><td>500</td></tr>
<tr><td>.18</td><td>jnr</td><td>150</td><td>180</td></tr>
</table>

<script>
var obj = [], 
    dir = 0, 
    tbl = document.querySelector('table'), 
    c = tbl.rows[0].cells.length,
    m = c*tbl.rows.length;
    
sortTable();
    
tbl.querySelector("tr:first-child").addEventListener("click", function(e) {
    e = e.target || e.srcElement;
    "TH" == e.tagName && (e = Object.entries(obj[e.id]).sort(function(a, b) {
        return a[1]-b[1]
    }).map(function(a) {
        return a[0]
    }),
    sortTable(e))
});

function sortTable(e){
    for(var d=c; d<m; d++) {
        var a = d%c, b;
        a || (b = d/c);
        e ? tbl.rows[b].cells[a].textContent = obj[a][e[b-1]] 
          : (obj[a] || (obj[a] = {}), obj[a][b] = tbl.rows[b].cells[a].textContent)
    }
}
</script>
</body>
</html>

Проще и в случае просто сделать реверс сортировки, если выбирается обратный порядок у активной колонки (последняя сортировка). Можно хранить ключи сортировки и просто реверсировать их.

laimas,
:thanks:

Сортировка строк таблицы с реверсом на js

Цитата:

Сообщение от laimas

Можно хранить ключи сортировки и просто реверсировать их.

:write: ... (на всякий случай уточню, ключ создаётся только при первом клике, для каждой колонки, потом при кликах, работает только реверс ).

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        table {
            border-collapse: collapse;
            margin: 20px auto;
        }

        td,
        th {
            border: 1px solid #ddd;
            padding: 5px;
        }

        th {
            cursor: default;
            padding: 6px;
            background: #eee;
        }
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            var tbl = document.querySelector("table"),
                tbody = tbl.querySelector("tbody"),
                th = [].slice.call(tbl.querySelectorAll("th"), 0),
                tr = [].slice.call(tbody.querySelectorAll("tr"), 0),
                td = [].slice.call(tbody.querySelectorAll("td"), 0),
                obj = {};
            tbl.querySelector("tr:first-child").addEventListener("click", function(e) {
                e = e.target || e.srcElement;
                if ("TH" == e.tagName) {
                    e = th.indexOf(e);
                    e = obj[e] || (obj[e] = td.filter(function(a, i) {
                        return i == e && (e += th.length);
                    }).map(function(a, i) {
                        return [i, a.textContent];
                    }).sort(function(a, b) {
                        a = a[1];
                        b = b[1];
                        return a == +a ? b - a : b > a ? 1 : b < a ? -1 : 0;
                    }));
                var f = document.createDocumentFragment();
                    e.reverse().forEach(function(a, i) {
                        f.appendChild(tr[a[0]]);
                    });
                tbody.appendChild(f);
                }
            });
        });
    </script>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>7.5</td>
                <td>abcd</td>
                <td>120</td>
                <td>230</td>
            </tr>
            <tr>
                <td>.5</td>
                <td>txt</td>
                <td>200</td>
                <td>500</td>
            </tr>
            <tr>
                <td>.18</td>
                <td>jnr</td>
                <td>150</td>
                <td>180</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Цитата:

Сообщение от рони

ключ создаётся только при первом клике, для каждой колонки

Ну так о чем я и писал. Но тут уже appendChild().

Цитата:

Сообщение от laimas

Но тут уже appendChild().

не знаю что лучше переместить 3 строки (1 один раз, если document.createDocumentFragment() использовать, добавлено выше) или содержимое 12 ячеек поменять (что уже, вызывает вопросы, если нужна именно сортировка строк)

Цитата:

Сообщение от рони

не знаю что лучше переместить 3 строки ...
или содержимое 12 ячеек поменять

Да фиг его знает. :) Я читал пост 3 темы, дошел до строки 29 кода, ну и что-то в голову стукнуло, а что если менять просто значения. Вот так и появилось, без оглядки на "зачем".

На большой таблице можно проверить что выгоднее.

PS. Хранить ключи можно только для обычной сортировки возрастание/убывание, а если потребуется пользовательская сортировка, тогда уже не получится.