Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Перемещение столбцов таблицы, текст всегда в первом столбце (https://javascript.ru/forum/jquery/82226-peremeshhenie-stolbcov-tablicy-tekst-vsegda-v-pervom-stolbce.html)

Dolf 06.04.2021 14:05

рони,
Спасибо Вам! Я вот именно про это и говорил.

Dolf 06.04.2021 14:26

рони,

Только еще самую малость изменил. У меня в самом первом td кнопки удаления строки. Поэтому обращаюсь ко второй)

$(function() {
var text = [...document.querySelectorAll('#ex4 tr td:nth-child(2)')].map(({childNodes})=> [...childNodes].slice(0,2));
$('#ex4').sorttable({
helperCells: null,
placeholder: 'placeholder',
stop: function( event, ui ) {
setTimeout(_=> document.querySelectorAll('#ex4 tr td:nth-child(2)').forEach((td,i) => td.prepend(...text[i])), 130)

}
}).disableSelection();
});

Dolf 06.04.2021 14:26

$(function() {
var text = [...document.querySelectorAll('#ex4 tr td:nth-child(2)')].map(({childNodes})=> [...childNodes].slice(0,2));
$('#ex4').sorttable({
    helperCells: null,
    placeholder: 'placeholder',
    stop: function( event, ui ) {
        setTimeout(_=> document.querySelectorAll('#ex4 tr td:nth-child(2)').forEach((td,i) => td.prepend(...text[i])), 130)

    }
}).disableSelection();
});

Dolf 03.06.2021 21:47

рони,
подскажите, пожалуйста, так как у меня в таблице теперь добавились кнопки перемещения таблицы - https://javascript.ru/forum/jquery/8...k-karusel.html
можно ли как то сделать что бы при перемещении теперь уже таким образом, эти подписи поясняющие также все равно были всегда в первом столбце?
это моя табличка:
https://pastenow.ru/9f0a0c6d37c4e5e30391dc55194ae6a8
вот тут получается перелистнул таблицу:
https://pastenow.ru/99a5e174e15ff221c659423a93d7deec
и естественно нету подписей к столбцам.
Пробовал так сделать:
/*прокрутка страницы*/
$(function() {
            let index = 1,
                max = $numBuild,
                length = $countBuildings + 1;
            const hideCells = _ => document.querySelectorAll("#ex4 tr")
            .forEach(({ cells }) => {
                [...cells].forEach(({ style }, i) => i && (style.display = i < index || i >= index + max ? "none" : "") )
            })
            hideCells();
            $(".scroll-table").on("click", "[data-up]", function() {
                var text = [...document.querySelectorAll('#ex4 tr td:nth-child(2)')].map(({childNodes})=> [...childNodes].slice(-2));
                setTimeout(_=> document.querySelectorAll('#ex4 tr td:nth-child(2)').forEach((td,i) => td.append(...text[i])), 130);
                index += +this.dataset.up;
                index = Math.max(1, Math.min(length - max, index));
                hideCells();
            })
        });

Но так не получается. Может подскажите как тут быть?

рони 03.06.2021 22:17

Цитата:

Сообщение от Dolf
подскажите, пожалуйста,

знать бы ещё в чём у вас проблема? по моему оба скриншота одинаковые, пихать константы в клик не нужно.

рони 03.06.2021 22:23

Dolf,
пробуйте...
$(function() {
            let index = 1,
                max = $numBuild,
                length = $countBuildings + 1;
            const hideCells = _ => document.querySelectorAll("#ex4 tr")
            .forEach(({ cells }) => {
                [...cells].forEach(({ style }, i) => i && (style.display = i < index || i >= index + max ? "none" : "") )
            })

            var text = [...document.querySelectorAll('#ex4 tr td:nth-child(2)')].map(({childNodes})=> [...childNodes].slice(-2));
            const textMove = index =>  document.querySelectorAll(`#ex4 tr td:nth-child(${++index})`).forEach((td,i) => td.append(...text[i]))

            hideCells();
            textMove(index);

            $(".scroll-table").on("click", "[data-up]", function() {
                index += +this.dataset.up;
                index = Math.max(1, Math.min(length - max, index));
                hideCells();
                textMove(index);
            })
        });

Dolf 03.06.2021 23:09

рони,
С меня пиво! :thanks: :thanks: :thanks:
Вы меня очень выручили!


Часовой пояс GMT +3, время: 05:50.