JQuery подсветка выбранных столбцов только в таблице

Question

Я вижу это сообщение на , выделяя четные столбцы , но могу ли я выделить только выбранные столбцы?

Вот код, который они используют:

$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");

Но мне бы хотелось: ПРИМЕЧАНИЕ: class="highlight" будет в выбранных столбцах, поэтому, если я выберу столбец 3, class="highlight" будет удален из столбца 2 и добавлен в столбец 3. jQuery необходимо добавить класс на основе в выбранном столбце.

<table class="tbl">
    <tr>
        <th class="firstColumn">
            Cell 1:Heading
        </th>
        <th class="highlight">
            Selected column so this should be highlighted
        </th>
        <th>
            Cell 3:Heading
        </th>
        <th>
            Cell 4:Heading
        </th>
        <th>
            Cell 5:Heading
        </th>
    </tr>
    <tr>
        <td>
            Cell 1:Row 1
        </td>
        <td class="highlight">
            Selected column so this should be highlighted
        </td>
        <td>
            Cell 3:Row 1
        </td>
        <td>
            Cell 4:Row 1
        </td>
        <td>
            Cell 5:Row 1
        </td>
    </tr>
    <tr>
        <td>
            Cell 1:Row 2
        </td>
        <td class="highlight">
            Selected column so this should be highlighted
        </td>
        <td>
            Cell 3:Row 2
        </td>
        <td>
            Cell 4:Row 2
        </td>
        <td>
            Cell 5:Row 2
        </td>
    </tr>
</table>

Answer 1

Возможно, вы захотите взглянуть на jQuery tableHover плагин для достижения этой цели. Тогда используйте что-то вроде этого

$('table.tbl').tableHover({
    colClass: 'hover', 
    clickClass: 'click', 
    headCols: true, 
    footCols: true 
}); 

EDIT:

Как то так?

Рабочая демонстрация - Нажмите на любую ячейку, чтобы выделить столбец

Код из демо -

$(function() {
  var rows = $('table.tbl tr');  

  rows.children().click(function() {

    rows.children().removeClass('highlight');  
    var index = $(this).prevAll().length;  
    rows.find(':nth-child(' + (index + 1) + ')').addClass('highlight');

  });
});

Answer 2

Вы решили использовать группы вместо того, чтобы добавлять классы в каждую ячейку?

Я только недавно начал видеть силу групп, и они работают так:

.highlight {
    background-color: yellow; 
 }

     <table id="myTable">
    	   
    	       <colgroup class="highlight"></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	   
    	    <thead>
    	       <tr>
    	           <th>header1</th>
    	           <th>header2</th>
    	           <th>header3</th>
    	           <th>header4</th>
    	           <th>header5</th>
    	       </tr>
    	    </thead>
    	    <tbody>
    	       <tr>
    	           <td>cell a</td>
    	           <td>cell b</td>
    	           <td>cell c</td>
    	           <td>cell d</td>
    	           <td>cell e</td>
    	       </tr>
        	<tbody>
     <table>

это будет отображать таблицу с 5 столбцами, где 1 столбец имеет класс css для выделения первого столбца. так что на самом деле единственное, что вам нужно сделать, это добавить функцию при наведении курсора на каждую ячейку, чтобы просто добавить класс подсветки в соответствующую группу.

есть полный видеогид, который вы можете найти прямо здесь: заголовок таблицы исправлений и выделение строк + столбцов.

* РЕДАКТИРОВАЛ ответ, потому что он не имеет значения, я неправильно прочитал вопрос и ответил на совершенно другой вопрос. (добавил правильный ответ сейчас)

Answer 3

Вот что я использую для добавления эффекта перекрестия в мой стол:

$('tbody td').hover(function() {
    $(this).closest('tr').find('td,th').addClass('highlight');
    var col = $(this).index()+1;
    $(this).closest('table').find('tr :nth-child('+col+')').addClass('highlight');
}, function() {
    $(this).closest('tr').find('td,th').removeClass('highlight');
    var col = $(this).index()+1;
    $(this).closest('table').find('tr :nth-child('+col+')').removeClass('highlight');
});

Кажется, что на больших столах работает немного медленнее (подсветка отстает).

Answer 4

Если вы хотите поддерживать colspan и rowspan, то сначала вам нужно построить индекс ячейки таблицы, т.е. матрица, определяющая положение ячейки в каждой строке независимо от разметки. Затем необходимо отследить события всех интересующих ячеек таблицы и рассчитать их смещение в матрице и столбцах, имеющих общий вертикальный индекс.

Результирующий поиск показан в следующей анимации:

Я написал плагин, который запускает события wholly.mouseenter и wholly.mouseleave для столбцов. Целиком .

Answer 5

Если вы создаете ссылку в заголовках таблицы, вы можете сделать что-то вроде этого:

$("table.tbl th a").click(function() {
   var colnum = $(this).closest("th").prevAll("th").length;

   $(this).closest("table").find("tr td").removeClass("highlight");
   $(this).closest("table").find("tr td:eq(" + colnum + ")").addClass("highlight");
}

Это установит все ячейки ниже по нажатой ссылке на класс "highlight".

Конечно, вы все равно должны установить правильный стиль в своем файле CSS:

table.tbl tr .highlight {  background-color: blue; }

Answer 6

Вы можете использовать плагин под названием целиком. Вы можете прочитать полное руководство по его интеграции здесь. http://voidtricks.com/wholly-jquery-plugin/