jquery mousedown修改td的樣式無效的問題解決
- 黄舟原創
- 2017-06-28 09:36:091596瀏覽
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