jQuery làm nổi bật các cột được chọn chỉ trong một bảng

Question

Tôi thấy bài đăng này trên highlighting even columns nhưng tôi có thể chỉ đánh dấu các cột được chọn không?

Đây là mã họ sử dụng:

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

Nhưng tôi muốn: LƯU Ý: các class="highlight" sẽ được trên các cột được lựa chọn, vì vậy nếu tôi chọn cột 3 class="highlight" sẽ được gỡ bỏ từ cột 2 và bổ sung đến cột 3. jQuery cần thêm lớp dựa trên cột đã chọn.

<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

Bạn có thể muốn xem jQuery tableHover plugin để đạt được điều này. Sau đó sử dụng một cái gì đó giống như

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

EDIT này:

Something như thế này?

Working Demo- Nhấp vào bất kỳ tế bào, để làm nổi bật cột

Mã từ bản 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

Nếu bạn tạo một liên kết trong tiêu đề bảng, bạn có thể làm điều gì đó như thế này :

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

Điều đó sẽ đặt tất cả các ô bên dưới liên kết được nhấp đến lớp "đánh dấu".

Tất nhiên, bạn vẫn nên thiết lập các phong cách chính xác trong file CSS của bạn:

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

Answer 3

có bạn concidered sử dụng colgroups thay vì thêm lớp để mỗi tế bào?

tôi chỉ vừa mới bắt đầu để xem sức mạnh của colgroups bản thân mình, và họ làm việc như thế này:

.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>

này sẽ làm cho một bảng với 5 cột, trong đó 1 cột có lớp css để làm nổi bật col đầu tiên. Vì vậy, thực sự là điều duy nhất bạn phải làm sau đó, thêm một chức năng để di chuột của mỗi tế bào, để chỉ cần thêm các lớp làm nổi bật cho colgroup tương ứng.

có một videoguide hoàn tất, bạn có thể tìm thấy ngay tại đây: table fix header, and row + column highlighting.

* EDITED câu trả lời vì nó không thích hợp, tôi đọc những câu hỏi sai, và trả lời cho một vấn đề hoàn toàn khác nhau. (Thêm bài trả lời đúng ngay bây giờ)

Answer 4

Đây là những gì tôi sử dụng để thêm một chữ thập ở giữa ảnh hưởng đến bàn của tôi:

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

vẻ để chạy một chút chậm trên bảng lớn mặc dù (làm nổi bật đứng sau).

Answer 5

Nếu bạn muốn hỗ trợ colspan và rowspan, thì trước tiên bạn cần tạo chỉ mục ô bảng, ví dụ: ma trận xác định vị trí ô trong mỗi hàng bất kể đánh dấu. Sau đó, bạn cần phải theo dõi các sự kiện của tất cả các ô bảng quan tâm và tính toán độ lệch của chúng trong ma trận và các cột chia sẻ chỉ mục dọc.

Các tra cứu kết quả được minh họa trong các phim hoạt hình sau:

Tôi đã viết một plugin mà gây nên một wholly.mouseenter và wholly.mouseleave sự kiện cho các cột. Wholly.

Answer 6

Bạn có thể sử dụng plugin được gọi là toàn bộ. Bạn có thể đọc hướng dẫn đầy đủ về cách tích hợp nó tại đây http://voidtricks.com/wholly-jquery-plugin/