ホームページ > 記事 > ウェブフロントエンド > 中段フックの色落ち効果の出し方のご紹介
中段フックの色落ち効果の出し方のご紹介
- 零下一度オリジナル
- 2017-07-18 18:02:471006ブラウズ
チェックボックスをクリックしてスタイルを追加し、チェックした行の色の変更効果の実装方法を紹介します。具体的な実装方法は次のとおりです
<!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>
//スタイルを追加する行をクリックしてください
<!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>以上が中段フックの色落ち効果の出し方のご紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。