隔行变色，第一行设置颜色，最后一行设置颜色

最新推荐文章于 2023-04-11 10:46:34 发布

原创最新推荐文章于 2023-04-11 10:46:34 发布 · 972 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #数据库 #json #ViewUI

html&css&javascript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一种使用jQuery简化网页中表格元素样式设置的方法。通过选择器定位到表格的不同部分，并应用特定的字体大小、颜色及背景色，使得表格显示更加直观且美观。


<html>
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script>
	$(function(){
	$("#table1 tr:first").css("fontSize","40");
	$("#table1 tr:last").css("color","red");
	$("#table1 tr:gt(0):lt(3)").css("fontSize","28");//lt(3)是从gt(0)出的序号，不要写成lt(4)
	$("#table1 tr:gt(0):even").css("background","red");//表头不参与“正文表格的颜色”；
	$("#table1 tr:gt(0):odd").css("background","yellow");
	})
</script>
</head>
<body>
	<table id="table1">
		<tr><td>姓名</td><td>成绩</td></tr>
		<tr><td>tom</td><td>100</td></tr>
		<tr><td>jim</td><td>99</td></tr>
		<tr><td>john</td><td>95</td></tr>
		<tr><td>jason</td><td>94</td></tr>
		<tr><td>suln</td><td>93</td></tr>
		<tr><td>平均分</td><td>96</td></tr>
	</table>
</body>
</html>