2009-04-17 42 views
5

Tôi cần làm nổi bật hàng của bảng trên chuột. Có vẻ như là một việc dễ dàng, phải không? Đặc biệt là sử dụng jQuery. Nhưng than ôi, tôi không may mắn như vậy.Hàng của bảng nổi bật jQuery

Tôi đã thử nghiệm các giải pháp khác nhau để làm nổi bật một dòng của bảng, nhưng không có vẻ làm việc :-(

Tôi đã thử nghiệm các kịch bản sau đây:

// TEST one  
jQuery(document).ready(function() { 

    jQuery("#storeListTable tr").mouseover(function() { 
    $(this).parents('#storeListTable tr').toggleClass("highlight"); 
    alert('test'); // Just to test the mouseover event works 
    }); 

}); 

//TEST 2 
jQuery(document).ready(function() { 

    $("#storeListTable tbody tr").hover( 
    function() { // mouseover 
      $(this).addClass('highlight'); 
    }, 
    function() { // mouseout 
      $(this).removeClass('highlight'); 
    } 
    ); 
}); 

Đây là HTML của tôi đang

<html> 
    <head> 
    <title>Title</title> 
    <link rel="stylesheet" href="css/storeLocator.css" type="text/css" 
media="screen" charset="utf-8" /> 
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></ 
script> 
    </head> 
    <body> 

<table id="storeListTable"> 
    <thead> 
     <tr class="even"> 
     <th>ID</th> 
     <th>Navn</th> 
     <th>E-post</th> 
     <th>Nettside</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="" id="store1"> 
     <td>10</td> 
     <td>Boss Store Oslo</td> 
     <td> <a href="mailto:">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="" id="store3"> 
     <td>8</td> 
     <td>Brandstad Oslo City</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="even" id="store4"> 
     <td>7</td> 
     <td>Fashion Partner AS</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="" id="store5"> 
     <td>1</td> 
     <td>Follestad</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="even" id="store6"> 
     <td>2</td> 
     <td>Follestad</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
    </tbody> 
    </table> 
    </body> 
</html> 

Vì vậy .... bất kỳ ai cũng có thể đẩy tôi đi đúng hướng?


CẬP NHẬT

tôi không sử dụng jQuery để làm nổi bật hàng bảng nữa, nhưng CSS.

Đây là yếu tố cho danh sách, nhưng tôi đoán này sẽ làm việc cho hàng bảng cũng như:

li: nth-con (lẻ) {background-color: # f3f3f3; }

Trả lời

9

Hãy thử plugin này http://p.sohei.org/jquery-plugins/columnhover/

Đây là cách bạn sử dụng.

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('#storeListTable').columnHover({ hoverClass:'highlight'}); 
    }); 
</script> 

Chăm sóc

+0

Cảm ơn bạn đời. Đó là plugin mà tôi đã sử dụng. – Steven

+0

hoạt động nhưng cũ. sử dụng phương thức màu nền của phương thức từ Julian. lưu ý - tức là bây giờ khoảng 1,5% (và thu hẹp) - và di động là khoảng 7% (và đang tăng_ - vì vậy mà một trong những tập trung vào đi về phía trước là dễ dàng :) –

5

Thông báo cảnh báo có thực sự xuất hiện khi bạn kiểm tra không?

Nếu có, có thể sự cố xảy ra với CSS của bạn. Phải mất một thời gian dài tôi mới nhận ra rằng hầu hết các kiểu được áp dụng cho một thẻ tr không có bất kỳ hiệu ứng nào. Vì vậy, nói chung, bạn cần phải áp dụng phong cách cho mỗi td ở hàng

.highlight td {highlighted appearance} 

hơn

.highlight {highlighted appearance} 
1

+1 wheresrhys. Sử dụng quy tắc nền trên .highlight td khiến ‘TEST 2’ của bạn hoạt động tốt cho tôi.

‘TEST 1’ sẽ không, do cuộc gọi parents() không cần thiết.

33

Nếu bạn không cần sự hỗ trợ IE6, làm nổi bật có thể được thực hiện với một số CSS đơn giản:

#table tr:hover { 
    background-color: #ff8080; 
} 
+0

Đây là phương pháp mặc định tôi đang sử dụng ngay bây giờ (tháng 6 năm 2012) . Sống và học hỏi :) – Steven

1

Một lần, tôi tìm thấy giải pháp này - công trình hoàn hảo - chỉ thêm vào! Thật không may, tôi không biết tác giả :(

<script type="text/javascript"> 

    $("#table_id").not(':first').hover(
     function() { 
      $(this).css("background","red"); 
     }, 
     function() { 
      $(this).css("background",""); 
     } 
    ); 

    </script> 
0

Tất nhiên, các giải pháp của Julian với CSS đơn giản là được ưa thích.Nếu bạn muốn làm điều đó tự động trong javascript, bạn có thể làm điều đó như thế này

$('#storeListTable').on('mouseenter','div',function(){$(this).css('background','white');}); 
$('#storeListTable').on('mouseleave','div',function(){$(this).css('background','');}); 

Nếu bạn có nhiều divs cho mỗi hàng, bạn có thể xác định div để được làm nổi bật bằng cách cho mỗi lớp row = "hàng" và đưa 'div.row' làm đối số thứ 2 của on().

Các vấn đề liên quan