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

jQuery学习笔记(6)--复选框控制表格行高亮

2015-01-27 12:20 363 查看

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
table
{
width: 300px;
}
table, tr, th, td
{
border: 1px solid black;
border-collapse: collapse;
}

td
{
text-align: center;
}

.even
{
background: #fff38f;
}
.odd
{
background: #ffffee;
}

.selected
{
background: lightgreen;
}
</style>
<script type="text/javascript">
$(function () {
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");

//方法1
//                        $("tbody>tr").click(function () {
//                            if ($(this).hasClass("selected")) {
//                                $(this).removeClass("selected").find(":checkbox").attr("checked", false);
//                            }
//                            else {
//                                $(this).addClass("selected").find(":checkbox").attr("checked", true);
//                            }

//                        });

//方法2
$("tbody>tr").click(function () {
var hasSelected = $(this).hasClass("selected");
//三元运算符
$(this)[hasSelected ? "removeClass" : "addClass"]("selected")
.find(":checkbox").attr("checked", true);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<thead>
<tr>
<th>
</th>
<th>
姓名
</th>
<th>
性别
</th>
<th>
暂住地
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
王丹丹
</td>
<td>
女
</td>
<td>
杭州
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
刘莹莹
</td>
<td>
女
</td>
<td>
南京
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
何晓晓
</td>
<td>
女
</td>
<td>
温哥华
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
毛龙龙
</td>
<td>
男
</td>
<td>
铁岭
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
张康
</td>
<td>
男
</td>
<td>
伦敦
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
戴维斯
</td>
<td>
男
</td>
<td>
墨尔本
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>

View Code
效果图:

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

标签：

相关文章推荐

新的分享

章节导航