Home > Article > Web Front-end > Introduction to how to achieve the discoloration effect of the middle row of hooks
Introduction to how to achieve the discoloration effect of the middle row of hooks
- 零下一度Original
- 2017-07-18 18:02:47954browse
Click the check box to add a style, and introduce the implementation method of the color change effect of the checked row. The specific implementation method is as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" 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>
//Click the row to add a style
<!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?1.1.11" 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>
The above is the detailed content of Introduction to how to achieve the discoloration effect of the middle row of hooks. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use JS to create actionable villain methodsNext article：Use JS to create actionable villain methods