jquery mousedown修改td的样式无效的问题解决
- 黄舟原创
- 2017-06-28 09:36:091594浏览
jquery mousedown修改td的样式无效的问题解决
//样式
<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的样式无效的问题解决的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn