td 스타일의 잘못된 jquery mousedown 수정 문제 해결-JS 튜토리얼-php.cn

td 스타일의 잘못된 jquery mousedown 수정 문제 해결

黄舟

풀어 주다： 2017-06-28 09:36:09

원래의

1591명이 탐색했습니다.

td 스타일의 잘못된 jquery mousedown 수정 문제에 대한 해결 방법

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

로그인 후 복사

최상의 답변:

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

로그인 후 복사

원래 작성하신 내용은 정확하지만 테이블에 데이터가 없으므로 페이지가 로드될 때 아무것도 표시되지 않습니다. 당신은 그것에 데이터를 써야합니다. 그리고 전체 스타일은 오른쪽을 기반으로 하지만 테이블에는 옷을 잘 보고 변경하세요

위 내용은 td 스타일의 잘못된 jquery mousedown 수정 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!