用jquery的mousedown修改 td的样式无效的问题丫~~

发布网友发布时间：2022-05-15 23:05

共4个回答

懂视网时间：2022-05-16 03:27

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，自己好好看看改改吧

热心网友时间：2022-05-16 00:35

热心网友时间：2022-05-16 01:53

什么情况

热心网友时间：2022-05-16 03:27

事件冒泡问题