将鼠标悬停在 Table 数据上

Question

我有一个 html table，其中有些单元格是空的，有些单元格有数据。当我将鼠标悬停在有数据的单元格上时，背景颜色应该变为黑色并且光标应该指向。如果单元格中没有数据或单元格为空白，单元格上不应有悬停，鼠标指针应正常。

Answer 1

您也可以使用纯 css - 取决于您支持的浏览器：

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

Fiddle Link

Answer 2

使用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'

            });
        }
    });
});

Answer 3

你也可以试试这个

$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>

这些在下面使用CSS

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

将鼠标悬停在 Table 数据上

Hover on Table Data

css

jquery

html-table