您的位置：首页 > Web前端 > JQuery

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

2015-03-20 16:15 197 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航