Как выделить столбец таблицы HTML без использования циклов? - PullRequest
3 голосов
/ 09 января 2012

У меня есть такая таблица:

<table>
  <thead>
    <tr>
     <th id="col-1"><input type="button" class="some" value="Company" /></th>
     <th>name</th>
     <th>Adress</th>
     <th>Zip</th>
     <th>Place</th>
     <th>Country</th>
    </tr>
   </thead>
   <tbody>
    <tr class="even">
     <td headers="col-1">Some ltd</td>
     <td>some name</td>
     <td>some street</td>
     <td>some zip</td>
     <td>some town</td>
     <td>some country</td>
    </tr>
    <tr class="odd">
     <td headers="col-1">Corp</td>
     <td>some name</td>
     <td>some street</td>
     <td>some zip</td>
     <td>some town</td>
     <td>some country</td>
    </tr>
   </tbody>
 </table>

Нечетные и четные строки имеют разные классы выделения oddHigh и evenHigh .

Вкл.щелкните заголовок столбца. Я хочу выделить столбец следующим образом:

$(".some").live("click", function() {
   var val = $(this).closest("TH, th").attr('id'),
       col = $( "td[headers="+ val +"]" ),
       // set odd/even
       i = col.closest("TR, tr").hasClass("odd") ? "oddHigh" : "evenHigh";

   col.hasClass("colHigh") ? col.removeClass("colHigh "+i) : col.addClass("colHigh "+i);
   });

. Выделяется весь столбец с oddHigh .

Есть ли способ подсветки в зависимости от класса ближайшего ряда БЕЗ циклического прохождения всего выделения?Или мне нужно установить colOdd на tr.odd td ... и colEven на tr.even td .. и использовать2 отдельных заявления?

Ответы [ 2 ]

5 голосов
/ 09 января 2012

Вы можете использовать псевдоклассы css :even и :odd css, если ваш браузер их поддерживает.также

tr:nth-child(odd)

и

tr:nth-child(even)

См. http://caniuse.com/#search=nth-child для совместимости.(без IE 6,7,8)

3 голосов
/ 09 января 2012

Возможно, вы захотите взглянуть на псевдоселекторы :even и :odd jQuery.: D

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...