突出显示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; 
}

答

你为什么要去使用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>标签。

+1 100％同意。开发人员经常使用javascript过度复杂化。这也可以防止出现任何“空白”问题。我创建了一个小提琴来演示如何使用这个http://jsfiddle.net/sAWnJ/ – Curt 2012-07-24 14:09:08

答

表中的标签

，定义这个属性

cellspacing="0"

但我必须需要细胞间距 – User 2012-07-24 13:59:12

突出显示html表中的行？

相关推荐