Question

我需要在悬停时以及点击时更改表格中td元素的背景。

我的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Highlighting</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
    $('table').on('mouseover', 'tr', function(){
        $(this).css({
            'background-color': '#DBE9FF'
        });
    }).on('mouseout', 'tr', function(){
        $(this).css({
            'background-color': '#FFFFFF'
        });
    }).on('click', 'td', function(){
        $(this).parent().children().css({
            'background-color': '#FFFFFF'
        });

        $(this).css({
            'background-color': '#7DAFFF'
        });
    });
});
</script>
<style>
table
{
    border-collapse: collapse;
}

td
{
    padding: 5px;
    border: 1px solid #666666;
    cursor: pointer;
}
</style>
</head>
<body>
<table>
    <tr>
        <td>
        Row 1 Col 1
        </td>
        <td>
        Row 1 Col 2
        </td>
        <td>
        Row 1 Col 3
        </td>
        <td>
        Row 1 Col 4
        </td>
        <td>
        Row 1 Col 5
        </td>
    </tr>
 </table>
</body>
</html>

效果很好，当我点击td时背景会发生变化，但悬停已应用于tr，我只需更改td背景在悬停时，点击查看特定的td，而不是其他td标记。

Answer 1

我稍微修改了上面的答案。尝试用更多的CSS来处理事情。使用hover伪瞬间使用javascript / jquery，如果你能帮助它使用一个类来为你的td添加样式。

CSS

tr td:hover
{
    background-color: #DBE9FF;
}

.active
{
  background-color: #7DAFFF;
}

Jquery的

$(function(){
    $('table').on('click', 'td', function(){

        // Remove all active class from all td 
        $(this).parent().children().removeClass('active');

        // Add active class to current td target 
        $(this).addClass('active');
    });
});

Fiddle Demo

Answer 2

它应该像＆＃39; tr td＆＃39;，

$('table').on('mouseover', 'tr td', function(){
        $(this).css({
            'background-color': '#DBE9FF'
        });
    }).on('mouseout', 'tr td', function(){
        $(this).css({
            'background-color': '#FFFFFF'
        });

Fiddle Demo

Answer 3

尝试在table tr td -

上绑定事件

$(function(){
    $('table tr td').click(function(){
      $(this).css('background-color','#DBBBBF');    
    })

    $('table tr td').mouseout(function () {
      $(this).css('background-color','#FFFFFF');    
    });

    $('table tr td').mouseover(function () {
      $(this).css('background-color','#DBE9FF');    
    });       
});

Try This

Answer 4

只需要css：

td:hover {
    background-color: red;
}

或javascript：

<td onmouseover="this.style.background-color = 'red';">

并且..如何同时悬停并单击一个元素？ O.O

如何在点击和悬停时更改td元素背景？

4 个答案: