Question

I use the following programs for create the highlighting the row in mouse over event it was working fine, but my problem is if mouse over the particular row the whitespace are occurring in between the highlighting bar? How to remove the whitespace?

Table Creation:

<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 for call css:

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

Css:

.hovered td {
   background: #ddd;
}

Answer 1

Why would you go about using javascript? It’d be far easier to just use the css :hover selector.

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;
}

This should work just fine, when the mouse hovers on the table row. the :hover selector works on any HTML element, not just <a> tags.