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

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	04.04.2021 21:15

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

Доброго времени суток.
Я не селен в jquery. Прошу помощи, примером.
Реализовал перемещение столбцов в таблице подключением библиотеки
jquery.sorttable.js столбцы успешно перетягиваются, их можно менять местами. Но теперь возникла потребность что бы в первом столбце всегда были поясняющие названия в независимости от перемены столбцов местами. То есть в таблице например 2 столбца в какой то из <td> написано сверху Город под городом написано Москва, меняем столбцы местами и слово Город опять остается в первом столбце, во втором его нету.
пытался найти всегда первый столбец, но не смог понять как его точно определять.

if ($('#ex4 td > *:nth-child(1)')) {
    $('#textInOnetd').css({"display": "block"});
}

Но так все равно не получается точно определять нужные <td>

рони	04.04.2021 22:51

Dolf,
сделайте минимальный пример

Dolf	05.04.2021 18:27

рони,

Допустим у меня есть таблица:

<table id="ex4">
		    <tbody>
			    <tr class="headerrow">
				    <th>header 1</th>
				    <th>header 2</th>
				    <th>header 3</th>
				    <th>header 4</th>
			    </tr>
			    <tr><td>Город<br>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
			    <tr><td>Улица<br>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
			
		    </tbody>
	    </table>

id="ex4" нужен для того что бы сделать ее draggable. После подключения js скрипта jquery.sorttable.js https://github.com/dbrink/sorttable/archive/master.zip в табличке столбцы можно перетаскивать.
И вот теперь задача:
При перетаскивании столбцов только у первого столбца всегда должны быть не меняющиеся данные это Город и Улица и только всегда в первом столбце таблицы. В перовом <td>. Пример есть еще такой на https://auto.ru/compare-offers/. Там прям видно если меняешь местами столбцы то в первом столбце всегда есть поясняющие данные, он не перетягиваются во второй столбец при перемещении. Во втором столбце их просто нет.

рони	05.04.2021 19:05

Dolf,
не могу помочь, не понимаю ваших пояснений.

Dolf	05.04.2021 20:18

Как же объяснить).

Есть таблица в которой каждый столбец перетаскиваемый (можно поменять местами с другим столбцом).

Красными стрелками виделил то что столбцы можно менять местами.

Где подчеркнуто под названием - реализовано так что когда столбцы таблицы меняются местами, эти надписи всегда остаются в первом столбце.

Как такое сделать?

Dolf	05.04.2021 20:18

Dolf	05.04.2021 20:19

https://prnt.sc/11511r7

рони	05.04.2021 20:41

Цитата:

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

Где подчеркнуто под названием - реализовано так что когда столбцы таблицы меняются местами, эти надписи всегда остаются в первом столбце.

может вам нужно сделать первый столбец с названиями, и указать что столбец неперемещаемый? или я опять вас неверно понял?

voraa

05.04.2021 20:59

Цитата:

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

После подключения js скрипта jquery.sorttable.js https://github.com/dbrink/sorttable/archive/master.zip в табличке столбцы можно перетаскивать.

Там же есть примеры, как сделать столбцы неперемещаемыми.
http://dbrink.github.io/sorttable/examples.html
Третий пример.

рони	05.04.2021 21:06

voraa,
https....examples.html

Dolf	05.04.2021 21:12

Все столбцы перемещаются, но поясняющие названия только в первом столбце. Если его переместить то и названия "уедут" в другое место, столбец же окажется например в середине (с поясняющими названиями). Так вот надо что бы при перемещении столбцов поясняющие названия всегда были в первом столбце, как на скриншоте. https://prnt.sc/11511r7
То-есть перемесил столбцы местами данные, а поясняющие название опять в первом столбце и так всегда, вне зависимости от перемещения столбцов.

voraa

05.04.2021 21:59

Цитата:

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

voraa,
https....examples.html

http://dbrink.github.io/sorttable/examples.html
Я этот адрес не вручную пишу, а копирую из адресной строки

Этот же адрес указан и тут
https://github.com/dbrink/sorttable

voraa

05.04.2021 22:02

Цитата:

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

То-есть перемесил столбцы местами данные, а поясняющие название опять в первом столбце и так всегда, вне зависимости от перемещения столбцов.

Я тоже ничего не понимаю.

Dolf	05.04.2021 22:07

Ребята, ну посмотрите, пожалуйста, на https://auto.ru/ добавьте пару машин в сравнение и все понятно будет. Я просто уже не знаю как написать.

рони	05.04.2021 22:34

Dolf,
что вам мешает создать создать надписи в отдельном столбце?

Dolf	05.04.2021 22:45

Ну скажем так, нельзя в отдельном (от слова совсем). Конечно я бы сделал в отдельном, но надо как на авто.ру) По этому прошу натолкнуть примером как всегда находить этот первый столбец и именно там показывать статичные записи, а везде скрывать.

рони	05.04.2021 23:05

Dolf,
тогда кешируйте надписи и по событию stop перемешайте их через 51 миллисекунду в первую ячейку

рони	05.04.2021 23:08

Dolf,
для структуры представленной вами выше это будет так ...

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

    }
}).disableSelection();
});

voraa

06.04.2021 07:12

Цитата:

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

Так вот надо что бы при перемещении столбцов поясняющие названия всегда были в первом столбце, как на скриншоте. https://prnt.sc/11511r7

Цитата:

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

Ребята, ну посмотрите, пожалуйста, на https://auto.ru/

Я не знаю, где там смотреть.
Приведите пример таблицы из 3-4 столбцов.

voraa

06.04.2021 07:23

Цитата:

Сообщение от Dolf (Сообщение 535253)

По этому прошу натолкнуть примером как всегда находить этот первый столбец и именно там показывать статичные записи, а везде скрывать.

Первый столбец находится

let firstcolumn = table.querySelectorAll('tr>*:first-child')

Т.е. надписи есть во всех столбцах, но показывать их нужно только в первом?
Тогда так можно

<style>
#tb td:not(:first-child)>.nadpis {
	visibility: hidden;
}
</style>
<body>
<table id=tb>
	<tr>
		<td><span class='nadpis'>Line1</span><br>1-1<td>
		<td><span class='nadpis'>Line1</span><br>1-2<td>
		<td><span class='nadpis'>Line1</span><br>1-3<td>
	</tr>
	<tr>
		<td><span class='nadpis'>Line2</span><br>2-1<td>
		<td><span class='nadpis'>Line2</span><br>2-2<td>
		<td><span class='nadpis'>Line2</span><br>2-3<td>
	</tr>
	<tr>
		<td><span class='nadpis'>Line3</span><br>3-1<td>
		<td><span class='nadpis'>Line3</span><br>3-2<td>
		<td><span class='nadpis'>Line3</span><br>3-3<td>
	</tr>
</table>
</body>

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, время: 21:58.