Lösung des Problems einer ungültigen jquery-Mousedown-Änderung des td-Stils-js-Tutorial-php.cn

Lösung des Problems einer ungültigen jquery-Mousedown-Änderung des td-Stils

黄舟

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

Original

1548 Leute haben es durchsucht

Lösung für das Problem, dass die JQuery-Mousedown-Änderung des TD-Stils ungültig ist

//样式
<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>

Nach dem Login kopieren

Beste Antwort:

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

Nach dem Login kopieren

Ursprünglich ist das, was Sie geschrieben haben, korrekt, aber es sind keine Daten vorhanden Wenn die Seite gerade geladen wird, werden also keine Daten angezeigt. Außerdem basiert Ihr gesamter Stil auf Recht, aber Sie schreiben „Clothing“ in die Tabelle dich selbst

Das obige ist der detaillierte Inhalt vonLösung des Problems einer ungültigen jquery-Mousedown-Änderung des td-Stils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!