jQuery实现选中行变色效果(实例讲解)
程序员文章站
2023-02-25 12:55:07
//点击复选框添加样式
//点击复选框添加样式
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
border: 0;
border-collapse: collapse;
}
td {
font: normal 12px/17px arial;
padding: 2px;
width: 100px;
}
th {
font: bold 12px/17px arial;
text-align: left;
padding: 4px;
border-bottom: 1px solid #333;
}
.even {
background: #fff38f;
}
/* 偶数行样式*/
.odd {
background: #ffffee;
}
/* 奇数行样式*/
.selected {
background: #ff6500;
color: #fff;
}
</style>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("tbody tr:even").addclass("even");
$("tbody tr:odd").addclass("odd");
$(":checkbox").change(function () {
if ($(this).is(":checked")) {
$(this).parents("tr").addclass("selected");
}else{
$(this).parents("tr").removeclass("selected");
}
});
//初始化默认选中色selected样式
$(":checkbox").each(function () {
if ($(this).is(":checked")) {
$(this).parents("tr").addclass("selected");
}
})
})
</script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked='checked'/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>maxman</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
//点击行添加样式
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
border: 0;
border-collapse: collapse;
}
td {
font: normal 12px/17px arial;
padding: 2px;
width: 100px;
}
th {
font: bold 12px/17px arial;
text-align: left;
padding: 4px;
border-bottom: 1px solid #333;
}
.even {
background: #fff38f;
}
/* 偶数行样式*/
.odd {
background: #ffffee;
}
/* 奇数行样式*/
.selected {
background: #ff6500;
color: #fff;
}
</style>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("tbody tr:even").addclass("even");
$("tbody tr:odd").addclass("odd");
$("tbody tr").click(function () {
var hasselect = $(this).hasclass("selected");
if (hasselect) {
$(this).removeclass("selected");
$(this).find("input").attr("checked", false);
} else {
$(this).addclass("selected");
$(this).find("input").attr("checked", true);
}
})
$('tbody>tr:has(:checked)').addclass('selected');
// $(":checkbox").each(function () {
// if ($(this).is(":checked")) {
// $(this).parents("tr").addclass("selected");
// }
// })
})
</script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked='checked'/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>maxman</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
以上这篇jquery实现选中行变色效果(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
上一篇： jQuery常见面试题之DOM操作详析