jQuery突出顯示只在一個表中的選定列

Question

我看到這篇文章在highlighting even columns，但我可以只突出顯示選定的列？

這裏是他們所使用的代碼：

$("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 plugin來實現此目的。然後使用類似這樣

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

編輯：

像這樣的事情？

Working Demo- 點擊任一單元格，以突出顯示列從演示

碼 - 如果您在表頭創建一個鏈接

$(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

，你可以做這樣的事情：

$("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"); 
} 

這將設置點擊鏈接下的所有單元格上課「突出」。

當然，你還是應該設置正確的樣式在你的CSS文件：

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

Answer 3

有你concidered使用colgroups，而不是添加類的每一個細胞？

我最近纔開始看colgroups的力量自己，他們的工作是這樣的：

.highlight { 
 
    background-color: yellow; 
 
}

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

這會使一個表，5列，其中1列有CSS類突出顯示第一列。所以實際上你必須做的唯一事情就是在每個單元格的懸停中添加一個函數，只需將高亮類添加到相應的colgroup即可。

有一個完整的videoguide你可以找到合適的位置：table fix header, and row + column highlighting.

*編輯的答案，因爲這是無關緊要的，我讀的問題錯了，並回答了一個完全不同的事情。 （現在又增加了一個正確的答覆）

Answer 4

這是我使用的加入十字會影響到我的表：

$('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 5

如果你想支持colspan和rowspan，那麼首先你需要建立表格單元格索引，即。矩陣，可以識別每一行中的細胞定位，而不考慮標記。然後，您需要跟蹤所有感興趣的表格單元格的事件，並計算矩陣中的偏移量和共享垂直索引的列。

所得查找在下面的動畫所示：

我已經寫觸發對列的wholly.mouseenter和wholly.mouseleave事件的插件。 Wholly。

Answer 6

您可以使用完全調用的插件。你可以閱讀完整的教程，如何在這裏集成它 http://voidtricks.com/wholly-jquery-plugin/