Как получить все ячейки текущего столбца
Я получаю контекст тег `th`, когда перебираю в цикле строку с названиями колонок и могу применить стили.
Но как получить все ячейки текущего столбца, чтобы назначить для них единый стиль. Через стиль тега `th` ячейки не изменяться |
|
ну а как здесь применить ?
/*применяем стили для колонок таблицы*/
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`. |
по логике , вот так
$('td:nth-child(' + index + ' 1)').css({...});
но это не работает. nth-child - в своем цикле считает все элементы, находящиеся на одном уровне вложенности относительно родительского элемента. То есть он должен будет пройти все ячейки текущего столбца. |
вот как решил
/*применяем стили для колонок таблицы*/
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'
});
});
}
}
|
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>
|
спасибо.
Еще заметил, чтобы изменить ширину определенного столбца : Обязательно нужно одновременное применение стиля к заголовку столбца и к его ячейкам. |
| Часовой пояс GMT +3, время: 17:26. |