Форум

alex-romanov · #1 (**permalink**) 16.04.2019, 22:42

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

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

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

рони · #2 (**permalink**) 16.04.2019, 23:02

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

alex-romanov · #3 (**permalink**) 17.04.2019, 20: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 · #4 (**permalink**) 17.04.2019, 20:26

по логике , вот так

$('td:nth-child(' + index + ' 1)').css({...});

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

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

alex-romanov · #5 (**permalink**) 17.04.2019, 20: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'
                    });

                });
            }

        }

рони · #6 (**permalink**) 17.04.2019, 20: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 · #7 (**permalink**) 17.04.2019, 21:13

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

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

Форум

Справочник

Discord чат

Курсы javascript