suchen

Heim >Web-Frontend >js-Tutorial >Lösung des Problems einer ungültigen jquery-Mousedown-Änderung des td-Stils

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

黄舟
黄舟Original
2017-06-28 09:36:091623Durchsuche

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>

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery löst das Problem der Ausführung von Konflikten zwischen MouseDown- und DoubleClick-MausereignissenNächster Artikel：jQuery löst das Problem der Ausführung von Konflikten zwischen MouseDown- und DoubleClick-Mausereignissen

In Verbindung stehende Artikel

Mehr sehen