CODEWITHSUNDEEP
jquerycsshtml-table
Nirmal Anand
Nirmal Anand

Reputation: 337

Hover on Table Data

I have a html table in which some cells are empty and some cells have data. When I do hover on the cells that have data,the background colour should change black and cursor should be pointed. If there are no data in the cell or if the cell is blank,there should be no hover applied on the cell and mouse pointer should be normal.

Upvotes: 0

Views: 1073

Answers (3)

daulat
daulat

Reputation: 949

Use jQuery:

$(document).ready(function(){
    $('td').on('mouseover', function(event) {
        event.preventDefault();
        var self=$(this);
        var x=$.trim(self.text());
        $('td').css({
            'cursor':'default',
            'background-color': 'white'
        });
        if(x==''){
            self.css({
                'cursor':'default',
                'background-color': 'white'
            });
        }else{
            self.css({
                'cursor':'pointer',
                'background-color': 'red'

            });
        }
    });
});

Upvotes: 1

Brandon Jake Sullano
Brandon Jake Sullano

Reputation: 335

you may also try this one

$query = mysql_query(Select * from tablename);
<table>
While( $test = mysq_fetch_array($query))

{
if($test['columnname'] !='')
{
$color = "has_content";
}
else
$color = "no_content";

echo "<td class='$color' >content...</td>";

}
</table>

these use these below CSS

 .has_content
    {
 background-color:black; 
}
    .no_content
    {
 background-color:white;
 }
    .has_content:hover
    { 
cursor:pointer;
}

Upvotes: 0

nanobar
nanobar

Reputation: 66355

You could also use pure css - depends what browsers you are supporting:

table td:hover:not(:empty) {
    background: red;
}

Fiddle Link

Upvotes: 1

Related Questions