jquery mousedown修改td的样式无效的问题解决

程序员文章站 2022-03-15 16:06:13

...

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

本来你写的是正确的，但是你table里没有数据，所以刚加载页面的时候就什么也不显示，所以你得里面写数据，还有就是你整个样式都是基于right，但是你却在table里写的是Clothes，自己好好看看改改吧

以上就是jquery mousedown修改td的样式无效的问题解决的详细内容，更多请关注其它相关文章！

jquery mousedown修改td的样式无效的问题解决

vue中element组件样式修改无效的解决方法

jQuery修改li下的样式以及li下的img的src的值的方法教程

基于jquery的高性能td和input切换并可修改内容实现代码_javascript技巧

修改elementUI组件样式无效的多种解决方式

解决vue中样式标记为Scoped时，element plus修改css样式无效的问题

关于jquery中css，addclass，sttr修改样式的效率问题？_html/css_WEB-ITnose

4.jQuery修改对象的内容和样式

修改JAVA_HOME无效，java版本保持不变的问题解决

关于jQuery中mousedown和mouseup事件响应的问题解决

基于jquery的高性能td和input切换并可修改内容实现代码_javascript技巧