突出顯示html表中的行？

我使用下面的程序來創建突出顯示行中鼠標懸停的事件，它工作正常，但我的問題是，如果鼠標懸停在特定的行上，在突出顯示欄之間出現空格？如何刪除空白？突出顯示html表中的行？

創建表：

<table border="0" id="TabDeclaration" width="100%" cellpadding="5" cellspacing="3" border="2"> 
    <tr> 
     <td>aaaa</td> 
     <td>bbbb</td> 
     <td>azaz</td> 
    </tr> 
    <tr> 
     <td>cccc</td> 
     <td>dddd</td> 
    </tr> 
    <tr> 
     <td>eeee</td> 
     <td>ffff</td> 
    </tr>  
</table>

的jQuery呼叫CSS：

$('#TabDeclaration tr').mouseover(function() { 
    if($.trim($(this).text()) != '') 
     $(this).addClass('hovered'); 
    }).mouseout(function() { 
     $(this).removeClass('hovered'); 
});

的CSS：

.hovered td { 
    background: #ddd; 
}

來源

2012-07-24 User

你爲什麼要去使用JavaScript？使用css :hover選擇器會容易得多。

HTML：

<tr> 
    <td>aaaa</td> 
    <td>bbbb</td> 
    <td>azaz</td> 
</tr> 

<tr> 
    <td>cccc</td> 
    <td>dddd</td> 
</tr> 
<tr> 
    <td>eeee</td> 
    <td>ffff</td> 
</tr>

CSS：

tr:hover { 
    background: #ddd; 
}

這應該只是正常工作，當鼠標在桌子上排徘徊。 :hover選擇器適用於任何HTML元素，而不僅僅是<a>標籤。

來源

2012-07-24 14:04:02

+1 100％同意。開發人員經常使用javascript過度複雜化。這也可以防止出現任何「空白」問題。我創建了一個小提琴來演示如何使用這個http://jsfiddle.net/sAWnJ/ – Curt 2012-07-24 14:09:08

表中的標籤

，定義這個屬性

cellspacing="0"

來源

2012-07-24 13:57:21

但我必須需要細胞間距 – User 2012-07-24 13:59:12

突出顯示html表中的行？

回答

相關問題