Перемещение столбцов таблицы, текст всегда в первом столбце

[Dolf]

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

[Dolf]

рони,

Только еще самую малость изменил. У меня в самом первом 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]

$(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]

рони,
подскажите, пожалуйста, так как у меня в таблице теперь добавились кнопки перемещения таблицы - 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();
            })
        });

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

[рони]

подскажите, пожалуйста,

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

[рони]

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]

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