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的样式无效的问题解决的详细内容。