jQuery在Chrome中突出顯示錶格行

我正在創建網站上某些信息的表格報告。這張表很寬，所以我想用jQuery在每一行上添加一個4px邊框。這裏是我的腳本：jQuery在Chrome中突出顯示錶格行

$(function() { 
    $('tr').hover(function() { 
     $(this).contents('td').css({'border-top':'4px solid #934739', 'border-bottom':'4px solid #934739'}); 
    }, 
    function() { 
     $(this).contents('td').css({'border-top':'1px solid #000','border-bottom':'1px solid #000'}); 
    }); 
});

它的工作原理完全一樣，應該在Firefox。然而，在Chrome瀏覽器中，它對前幾行很好，但隨後它開始在先前的懸停行上「留下」一些邊框顏色。

我在使用Chrome 15.0.874.106的Mac上。這裏以jsFiddle爲例：http://jsfiddle.net/D6eKE/1/

有什麼我可以做的，以使這項工作在Chrome中更好？謝謝你的幫助！

來源

2011-11-02 Vecta

很奇怪。似乎在某種程度上與邊界崩潰有關。如果你沒有摺疊邊界它沒有相同的問題：http://jsfiddle.net/D6eKE/3/ –

看起來你很接近，所以嘗試添加ID選擇：

$(function(){ 
    $("#tableid tr").hover(
     function(){ 
      $(this).addClass("highlight"); 
     }, 
     function(){ 
      $(this).removeClass("highlight"); 
     } 
    ); 
});

您也可以使用columnHover插件：

$(document).ready(function(){ 
    $("#tableid").columnHover({ hoverClass: "highlight" }); 
});

最後，你還可以用做到這一點一些簡單的CSS：

#tableid tr:hover { 
    background-color: #f8f8f8; 
}

來源

2011-11-02 17:24:46

我建議最後的路線，如果在jQuery中使用'addClass'和'removeClass'然後使用CSS風格，而不是'.css' – rickyduck

感謝您關於'addClass'和'removeClass'的建議。似乎是一個更好的選擇。 –

我想我會用'addClass'和'removeClass'去。這似乎比我想要完成的事情容易得多。謝謝你們的幫助。 – Vecta

-1

我相信你必須使用.each（）來應用函數到所有由jQuery選擇器$（'tr'）返回的項目。這將對由jQuery返回的對象數組進行迭代，並將所需的操作應用到它們中的每一個，在這種情況下爲tr標記。類似於

$(function(){ 
    $('tr').hover(function() { 
     $(this).css({'border-top':'4px solid #934739', 'border-bottom':'4px solid #934739'}); 
     }, 
     function() { 
      $(this).css({'border-top':'1px solid #000', 'border-bottom':'1px solid #000'}); 
     }); 
});

來源

2011-11-02 17:29:34 Rynkadink

這裏沒有必要每個都發布的代碼根本不起作用。 jquery的一個優點是事物適用於整個集合，不需要迭代。 –

@Rynkadink：不，你不需要使用'.each（）'。 – Tadeck

感謝您的提示，關於.each（）。 @James Montagne，離開'td'時它不起作用。謝謝你的減號。代碼現在完全可用。 – Rynkadink

jQuery在Chrome中突出顯示錶格行

回答

相關問題