Jquery实现，点击选中，点击取消选中

最新推荐文章于 2024-05-09 15:49:11 发布

猴子年华、

最新推荐文章于 2024-05-09 15:49:11 发布

阅读量2.3k

点赞数

分类专栏： Jquery 文章标签： Jquery实现点击选中点击取消选中

本文链接：https://blog.csdn.net/Lg632/article/details/44493629

版权

Jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0 auto;padding:0;}
#tbl tr td{border:1px red solid;width:100px;}
#tbl{border-collapse: collapse;}

</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$().ready(function(){
//隔行换色
$("#tbl tr:odd").css("background","#ccc");
$("#tbl tr:even").css("background","pink");
//为奇偶行分别添加属性，值为原来的颜色
$("#tbl tr:odd").attr("bg","#ccc");
$("#tbl tr:even").attr("bg","pink");

$("#tbl tr").click(function(){

var bgc=$(this).attr("bg");//获得当前行的属性，即为原来的颜色

//"che"为单击行添加的额外属性
if($(this).attr("che")){
//判断存在"che"属性即为上一次的选中行
$(this).css("background",bgc);//回复原色
$(this).removeAttr("che");//删除属性"che"


}else{
//该行不存在"che"属性时
$("#tbl tr:odd").css("background","#ccc");
$("#tbl tr:even").css("background","pink");//所有行恢复原色
$(this).css("background","red");//选中行添加选中色
$(this).siblings().removeAttr("che");//删除所有行的"che"属性
$(this).attr("che","che")//为当前添加"che"属性
}

});

});

</script>
</head>
<body>
<table id="tbl">
<tr><td>姓名</td><td>年龄</td><td>性别</td><td>民族</td></tr>
<tr><td>张三</td><td>22</td><td>男</td><td>汉</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
<tr><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
</table>

</body>
</html>