Как получить все ячейки текущего столбца
Я получаю контекст тег `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, время: 10:48. |