Solving the problem of invalid jquery mousedown modification of td style-JS Tutorial-php.cn

Solving the problem of invalid jquery mousedown modification of td style

黄舟

Release： 2017-06-28 09:36:09

Original

1593 people have browsed it

jquery mousedown modification of td style invalid problem solution

//样式
<style type="text/css">
#right td
{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
font-size: 11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
font-size: 15px;
}
td.alt
{
background: #F5FAFA;
color: #797268;
}
img
{
max-width: 100px;
max-height: 100px;
}
th
{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
font-weight: bold;
background: #4a98af;
}
tr.over td
{
background: #ecfbd4; /*这个将是鼠标高亮行的背景色*/
}
td.selected, tr.even td.selected, tr.odd td.selected
{
background: #bce774;
color: #555;
}
tr.click td, td.down
{
background: #bce774;
color: #fff;
}
#right a
{
text-decoration: none;
color: #057fac;
}
#right a:hover
{
text-decoration: none;
color: #999;
}
</style>

//脚本
<script type="text/javascript">
$(document).ready(function(){
$("#Clothes tr td").mousedown(function(){//鼠标按住时remove mouseenter时 td的样式。
$(this).removeClass("over");$(this).addClass("click");}) 
$("#Clothes tr td").mouseup(function(){//鼠标弹起时，清除td的样式
$(this).removeClass("click");}) 
$("#Clothes tr").mouseenter(function(){//鼠标进入tr添加样式.over
$(this).addClass("over");})
$("#Clothes tr").mouseout(function(){ //鼠标离开tr，清除样式.over
$(this).removeClass("over");})
$("#Clothes tr").click(function(){ //click tr时，添加样式.click
$(this).addClass("click");$(this).siblings().removeClass("click");}) 
});
</script>

<table id="Clothes">
<tr>
<td style="width: 10%">
<td style="width: 20%">
<td style="width: 10%">
</tr>
</table>

Copy after login

Best answer:

<style type="text/css">
        #right td
        {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            font-size: 11px;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
            font-size: 15px;
        }
        td.alt
        {
            background: #F5FAFA;
            color: #797268;
        }
        img
        {
            max-width: 100px;
            max-height: 100px;
        }
        th
        {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            font-weight: bold;
            background: #4a98af;
        }
        tr.over td
        {
            background: #ecfbd4; /*这个将是鼠标高亮行的背景色*/
        }
        td.selected, tr.even td.selected, tr.odd td.selected
        {
            background: #bce774;
            color: #555;
        }
        tr.click td, td.down
        {
            background: #bce774;
            color: #fff;
        }
        #right a
        {
            text-decoration: none;
            color: #057fac;
        }
        #right a:hover
        {
            text-decoration: none;
            color: #999;
        }
    </style>
<script type="text/javascript">
        $(document).ready(function () {
            $("#right tr td").mousedown(function () {//鼠标按住时remove mouseenter时 td的样式。
                $(this).removeClass("over"); $(this).addClass("click");
            })
            $("#right tr td").mouseup(function () {//鼠标弹起时，清除td的样式
                $(this).removeClass("click");
            })
            $("#right tr").mouseenter(function () {//鼠标进入tr添加样式.over
                $(this).addClass("over");
            })
            $("#right tr").mouseout(function () {  //鼠标离开tr，清除样式.over
                $(this).removeClass("over");
            })
            $("#right tr").click(function () {  //click tr时，添加样式.click
                $(this).addClass("click"); $(this).siblings().removeClass("click");
            })
        });
    </script>
 
<body>
    <table id="right">
        <tr>
            <td style="width: 10%">哈哈
            </td>
            <td style="width: 20%">嘿嘿
            </td>
            <td style="width: 10%">呵呵
            </td>
        </tr>
    </table>
</body>

Copy after login

What you wrote is correct, but there is no data in your table, so the page has just been loaded Nothing is displayed when , so you have to write data in it. Also, your entire style is based on right, but you write Clothes in the table. Take a good look and change it yourself

The above is the detailed content of Solving the problem of invalid jquery mousedown modification of td style. For more information, please follow other related articles on the PHP Chinese website!