各位大神，请问如何用jquery或js实现：选中tr 并改变背景色？
tr中本身绑定了mouseout和mouseover，颜色会变化，希望在点击的时候，被点击的那个tr颜色变为第三种颜色，且mouseout，mouseover都不会影响它...
tr中本身绑定了mouseout和mouseover，颜色会变化，希望在点击的时候，被点击的那个tr颜色变为第三种颜色，且mouseout，mouseover都不会影响它，然后点击另外一个tr时，再只显示那个的颜色？
不用插件，直接用jquery或js实现，如何弄？求教了。。。急！！！！ 展开
不用插件，直接用jquery或js实现，如何弄？求教了。。。急！！！！ 展开
5个回答
展开全部
先在样式表中写好点击的效果，然后在通过JS来添加删除这个样式就可以了，具体看下面这个例子
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('table tr').click(function(){
$('table tr').removeClass('on');
$(this).addClass('on');
})
});
</script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
tr.on td{
background-color: #e5e5e5;
}
</style>
</head>
<body>
<table width="100%">
<tr class="on">
<td>sdfas</td>
</tr>
<tr>
<td>sdfas</td>
</tr>
<tr>
<td>sdfas</td>
</tr>
<tr>
<td>sdfas</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('table tr').click(function(){
$('table tr').removeClass('on');
$(this).addClass('on');
})
});
</script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
tr.on td{
background-color: #e5e5e5;
}
</style>
</head>
<body>
<table width="100%">
<tr class="on">
<td>sdfas</td>
</tr>
<tr>
<td>sdfas</td>
</tr>
<tr>
<td>sdfas</td>
</tr>
<tr>
<td>sdfas</td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
但tr被点击后，添加一个class属性（如clicked）。
为这个class添加第三种颜色的css背景。
.clicked{
background-color:#xxx;
}
mouseout和mouseover事件发生，先判断tr的class属性里有没有点击后添加的属性。
如
$().mouseout(function(){
if(this.classname == 'clicked')
{
}
else
{
}
});
这种思路
为这个class添加第三种颜色的css背景。
.clicked{
background-color:#xxx;
}
mouseout和mouseover事件发生，先判断tr的class属性里有没有点击后添加的属性。
如
$().mouseout(function(){
if(this.classname == 'clicked')
{
}
else
{
}
});
这种思路
追问
这样的话 选择下一个tr的时候，上一个被选中的颜色如何清除呢？
且选中的目的是为了修改，貌似能用全局变量记录刚选中的tr，然后再显示修改？有木有其他的方法呢？
追答
可以实现，
在执行 tr被点击后，添加一个class属性（如clicked）前。
先检索是否有添加的class属性（如clicked）的tr元素，有则删除class。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$("table tr").click(function(){
$("table tr").css('background-color','yellow');//先将颜色改为以前面的颜色
$(this).css('background-color','red');//再将单击的那行改成需要的颜色
});
$("table tr").css('background-color','yellow');//先将颜色改为以前面的颜色
$(this).css('background-color','red');//再将单击的那行改成需要的颜色
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在用click事件就可以啦
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
非常简单的：
$("table#aijquery").on("click",function(e){
$(e.target).parent("tr").addClass("bg-primary");
});这里有在线效果演示：
另外再给你推荐一篇非常经典的关于jquery操作表格的文章：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
