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

表单选择时变色jquery实现

2015-10-12 19:39 721 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../scripts/jquery-2.1.4.js"></script>
<script>
$(function(){
$(":checkbox").change(function(){
var $tr = $(":checked").parent().parent();
$tr.css("backgroundColor","yellow");
$tr = $(":not(:checked)").parent().parent();
$tr.css("backgroundColor","white");
});

});
</script>
<style>
table{
margin:auto;
border-collapse:collapse;
}
td{
width:100px;
border:1px solid;
}
caption{
font-size:30px;
}
#head{
background-color:#CCC;
}
</style>
</head>
<body>
<table>
<caption>information of salary</caption>
<tr id="head">
<td>checked</td><td>name</td><td>salary</td><td>age</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>wuming</td><td>10000</td><td>25</td>
</tr>
<tr><td><input type="checkbox"></td><td>xiuye</td><td>100000</td><td>25</td></tr>
<tr><td><input type="checkbox"></td><td>xiaojingyan</td><td>20000</td><td>45</td></tr>
<tr><td><input type="checkbox"></td><td>xufeng</td><td>30000</td><td>78</td></tr>
</table>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航