jQuery问题，隔行换色
点击之后对应行变色同时复选框被选中，第一次是没事的，为什么点击取消后再次点击这一行行复选框不会被选中？<html><head><style>table{text-alig...
点击之后对应行变色同时复选框被选中，第一次是没事的，为什么点击取消后再次点击这一行行复选框不会被选中？
<html>
<head>
<style>
table{
text-align:left;
}
td{
width:150px;
}
.dan{
background-color:yellow;
}
.shuang{
background-color:blue;
}
.ed{
background-color:red;color:#ffffff;
}
</style>
<script type=text/javascript src="jquery.js"> </script>
<script type=text/javascript>
$(document).ready(function(){
$("tbody>tr:even").addClass("dan");
$("tbody>tr:odd").addClass("shuang");
$("tbody>tr:has(:checked)").addClass("ed");
$("tbody>tr").click(function(){
var hased=$(this).hasClass("ed");
if(hased)
{
$(this).removeClass("ed").find(":input").attr("checked",false);
}else {
$(this).addClass("ed").find(":input").attr("checked",true);
}
});
});
</script>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<td></td><th>标题</th><th>时间</th><th>地点</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长2</td><td>2015</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长3</td><td>2015</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长4</td><td>2015</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长5</td><td>2015</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长5</td><td>2015</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长5</td><td>2015</td><td>上海</td>
</tr>
</tbody>
</table>
</body>
</html> 展开
<html>
<head>
<style>
table{
text-align:left;
}
td{
width:150px;
}
.dan{
background-color:yellow;
}
.shuang{
background-color:blue;
}
.ed{
background-color:red;color:#ffffff;
}
</style>
<script type=text/javascript src="jquery.js"> </script>
<script type=text/javascript>
$(document).ready(function(){
$("tbody>tr:even").addClass("dan");
$("tbody>tr:odd").addClass("shuang");
$("tbody>tr:has(:checked)").addClass("ed");
$("tbody>tr").click(function(){
var hased=$(this).hasClass("ed");
if(hased)
{
$(this).removeClass("ed").find(":input").attr("checked",false);
}else {
$(this).addClass("ed").find(":input").attr("checked",true);
}
});
});
</script>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<td></td><th>标题</th><th>时间</th><th>地点</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长2</td><td>2015</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长3</td><td>2015</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长4</td><td>2015</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长5</td><td>2015</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长5</td><td>2015</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" ></td><td>标题一定要长5</td><td>2015</td><td>上海</td>
</tr>
</tbody>
</table>
</body>
</html> 展开
2个回答
展开全部
$(document).ready(function() {
var trs = $("tbody>tr");
// 防止事件冒泡, 并处理点击换色
trs.find(":checkbox").click(function(e) {
var me = $(this),
tr = me.closest("tr");
tr.toggleClass("ed");
e.stopPropagation
? e.stopPropagation()
: e.cancelBubble = true;
});
// 使用toggle轮换点击切换该行颜色以及修改该行的复选框的选择状态
trs.toggle(function() {
$(this).addClass("ed").find(":checkbox:not(:checked)").prop("checked", true);
}, function() {
$(this).removeClass("ed").find(":checkbox:checked").prop("checked", false);
// 隔行换色
}).each(function(i) {
$(this).addClass(["dan", "shuang"][i % 2]);
});
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
