Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как получить все ячейки текущего столбца (https://javascript.ru/forum/jquery/77304-kak-poluchit-vse-yachejjki-tekushhego-stolbca.html)

alex-romanov 16.04.2019 23:42

Как получить все ячейки текущего столбца
 
Я получаю контекст тег `th`, когда перебираю в цикле строку с названиями колонок и могу применить стили.

Но как получить все ячейки текущего столбца, чтобы назначить для них
единый стиль.

Через стиль тега `th` ячейки не изменяться

рони 17.04.2019 00:02

alex-romanov,
:nth-child
Знаете ли вы селекторы?

alex-romanov 17.04.2019 21:21

ну а как здесь применить ?

/*применяем стили для колонок таблицы*/
        function applyStyleForThOfTable(selector) {

            if(!options.isUsedDataTables){

                var row = $(selector).find('thead > tr > th');

               var i = 0;
                $.each(row, function (index, value) {

                    var currentStyle = options.arrStyleForWidthTh[index];

                    var length = Object.keys(currentStyle).length;
                    
                    if(Object.keys(currentStyle).length === 0){
                        return true;
                    }

                   applyStyle(value , currentStyle);


                    ??????   value:nth-child(index + 1);

                });
            }

        }


value - это контекст текущей ячейке в строке заголовков колонок.

applyStyle(value , currentStyle);


так я могу применить стиль только к тегу `th`.

alex-romanov 17.04.2019 21:26

по логике , вот так
$('td:nth-child(' + index + ' 1)').css({...});


но это не работает.

nth-child - в своем цикле считает все элементы, находящиеся на одном уровне вложенности относительно родительского элемента.
То есть он должен будет пройти все ячейки текущего столбца.

alex-romanov 17.04.2019 21:41

вот как решил

/*применяем стили для колонок таблицы*/
        function applyStyleForThOfTable(selector) {

            if (!options.isUsedDataTables) {

                var row = $(selector).find('thead > tr > th');

                var i = 0;
                $.each(row, function (index, value) {

                    var currentStyle = options.arrStyleForWidthTh[index];

                    var length = Object.keys(currentStyle).length;

                    if (Object.keys(currentStyle).length === 0) {
                        return true;
                    }

                    applyStyle(value, currentStyle);

                    //  applyStyle ( 'td:nth-child(' + index + ' 1)', currentStyle);

                    var indexTd = index + 1;
                    $(value).css({
                        'width': '5%'
                    })

                    $('td:nth-child(' + indexTd + ' )').css({

                        'width': '5%',
                        'word-break': 'break-all', /*перенос слов*/
                        'wrap': 'soft'
                    });

                });
            }

        }

рони 17.04.2019 21:49

alex-romanov,
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
$(function() {
 var index = 1;
 $('tbody tr td:nth-child(' + (index + 1) +')').css({"backgroundColor": "#FF0000"});
});
    </script>
</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
</body>
</html>

alex-romanov 17.04.2019 22:13

спасибо.
Еще заметил, чтобы изменить ширину определенного столбца :

Обязательно нужно одновременное применение стиля к заголовку столбца и к его ячейкам.


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