Jquery實現，點選選中，點選取消選中
阿新 • • 發佈：2019-01-27
<!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>
<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>