实现table表格循环逐条高亮

向上小阿鑫

已于 2023-01-17 16:34:09 修改

阅读量216

点赞数 1

文章标签：前端 css html

于 2023-01-17 16:29:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62353876/article/details/128717808

版权

这是一个使用HTML、CSS和JavaScript实现的学生综合评价得分表，展示了上海市逸夫职业技术学校2022年度学生的得分情况。表格包含学生姓名、学校、评分年度和综合得分等信息，并通过JavaScript实现每6秒滚动高亮显示不同行的效果。哈希值用于数据验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

<div class="xssgd-left">
						<div class="zhpjdfb-title">学生综合评价得分表</div>
						<div class="tablebox">
							<table id="tableId" border="0" cellspacing="0" cellpadding="0">
								<thead>
									<tr>
										<th>学生姓名</th>
										<th>学校</th>
										<th>评分年度</th>
										<th>综合得分</th>
										<th style="width: 130px;">存证哈希</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>熊又颖</td>
										<td>上海市逸夫职业技术学校</td>
										<td>2022</td>
										<td>98</td>
										<td>97ba3449-dd5c-4744-a30e-387e424bb319</td>
									</tr>
									<tr>
										<td>王赞</td>
										<td>上海市逸夫职业技术学校</td>
										<td>2022</td>
										<td>95</td>
										<td>97ba3449-dd5c-4744-a30e-387e424bb319</td>
									</tr>
									<tr>
										<td>郭嘉</td>
										<td>上海市逸夫职业技术学校</td>
										<td>2022</td>
										<td>97</td>
										<td>97ba3449-dd5c-4744-a30e-387e424bb319</td>
									</tr>
									<tr>
										<td>张甜</td>
										<td>上海市逸夫职业技术学校</td>
										<td>2022</td>
										<td>96</td>
										<td>97ba3449-dd5c-4744-a30e-387e424bb319</td>
									</tr>
									<tr>
										<td>李友友</td>
										<td>上海市逸夫职业技术学校</td>
										<td>2022</td>
										<td>98</td>
										<td>97ba3449-dd5c-4744-a30e-387e424bb319</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>

css部分

.xssgd-left {
	background: url("../images/xssgd-bg1.png") 100% 100% no-repeat;
	width: 493px;
	height: 352px;
	position: absolute;
	bottom: 10px;
	left: 18px;
	text-align: center;
}

table,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0px;
}

.zhpjdfb-title {
	font-size: 22px;
	color: rgb(19, 223, 255);
	margin-top: 5px;
}

.tablebox {
	margin: 0 4px;
	width: 485px;
	height: 320px;
	overflow: hidden;
}

.tablebox>table {
	margin-top: 10px;
	width: 100%;
}
.tablebox table th{
	height: 30px;
	font-size: 14px;
	font-weight: 600;
	line-height: 30px;
	text-align: center;
}
.tablebox>table tr td:nth-child(1),.tablebox>table tr td:nth-child(2),.tablebox>table tr td:nth-child(3),.tablebox>table tr td:nth-child(4) {
	/* background-color: yellow; */
	height: 56px;
	font-size: 14px;
	line-height: 56px;
}
.tablebox>table tr td:nth-child(5){
	font-size: 10px;
}
.tablebox table th {
	color: rgb(19, 223, 255);
}

.tablebox table td img {
	display: inline-block;
	vertical-align: middle;
}

/* .tablebox table tbody tr:nth-child(even) {
	background-color: rgb(11, 38, 65);
} */

.tablebox.table_md table td,
.tablebox.table_md table th {
	line-height: 40px;
}
.height{
	background-color: rgb(11, 38, 65);
	color:rgb(19, 223, 255);
}

重头戏js部分

$(function() {
	$("#tableId").find("tr:eq(" + 1 + ")").addClass("height").siblings().removeClass("height");
	var tab = document.getElementById("tableId");
	var rows = tab.rows.length;
	var n = 0
	setInterval(loop, 6000);

	function loop() {
		n++;
		$("#tableId").find("tr:eq(" + n + ")").addClass("height").siblings().removeClass("height");
		if (n % rows == 0) {
			n = 0;
		}
	}
})