html-表格逐行变色

最新推荐文章于 2022-07-14 13:14:04 发布

静安书以沫

最新推荐文章于 2022-07-14 13:14:04 发布

阅读量517

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/whatname123/article/details/110367531

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这个示例代码展示了一个HTML表格，实现了行颜色交替显示和全选/全不选的功能。当点击表格时，行颜色会切换，通过JavaScript函数`changeColor()`实现。同时，用户可以通过全选框来选中所有表格项，`checkall()`函数负责同步全选状态并更改背景颜色。

摘要由CSDN通过智能技术生成

表格逐行变色测试代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			td {
				font-size: 13px;
				text-align: center;
			}
			
			table {
				width: 400px;
				height: 200px;
			}
			
			.td1 {
				text-align: left;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

	</head>

	<body>
		<table border="1px" cellspacing="0" align="center" onclick="change()">
			<tr>
				<td>全选/全不选<input type="checkbox" name="manycheck" onclick="checkall()"></td>
				<td>姓名</td>
				<td>性别</td>
				<td>电话</td>
				<td>爱好</td>
			</tr>
			<tr>
				<td class="td1"><input type="checkbox" name="manycheck"></td>
				<td>小明</td>
				<td>男</td>
				<td>110</td>
				<td>小芳</td>
			</tr>
			<tr>
				<td class="td1"><input type="checkbox" name="manycheck"></td>
				<td>小芳</td>
				<td>男</td>
				<td>110</td>
				<td>小陈</td>
			</tr>
			<tr>
				<td class="td1"><input type="checkbox" name="manycheck"></td>
				<td>小陈</td>
				<td>男</td>
				<td>110</td>
				<td>小花</td>
			</tr>
			<tr>
				<td class="td1"><input type="checkbox" name="manycheck"></td>
				<td>小花</td>
				<td>男</td>
				<td>110</td>
				<td>东东</td>
			</tr>
			<tr>
				<td class="td1"><input type="checkbox" name="manycheck"></td>
				<td>史特</td>
				<td>男</td>
				<td>110</td>
				<td>陈虎</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		var flag = true;
		var flag2 = true;
		function changecolor() {
			if(flag) {
				$("tr:odd").css("background-color", "yellow")
				$("tr:even").css("background-color", "white")
			} else {
				$("tr:even").css("background-color", "yellow")
				$("tr:odd").css("background-color", "white")
			}
			flag = !flag;
		}

		function change() {
			if(flag2){
				changecolor();
			}
			flag2 = true;
		}

		function checkall() {
			changecolor();
			for(var index = 1; index < $("input").length; index++) {
				$("input")[index].checked = $("input")[0].checked;
			}
			if($("input")[0].checked == true) {
				$("tr").css("background-color", "yellow");
			} else {
				$("tr").css("background-color", "white")
			}
			flag2 = false;
		}
	</script>

</html>

静安书以沫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html-表格逐行变色

表格逐行变色测试代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> td { font-size: 13px; text-align: center; } table { width: 400px; height:
复制链接

扫一扫