`
jeelee
  • 浏览: 636910 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

 
阅读更多
<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>

分享到:
评论

相关推荐

    gridcontrol隔行变色、焦点行颜色、改变显示值、固定列

    在本文中,我们将深入探讨如何利用GridControl实现隔行变色、设定焦点行颜色、改变显示值以及固定列不移动这四个关键功能,并提供相关的源码示例。 1. **隔行变色**: 隔行变色是一种常见的视觉增强技巧,它可以...

    实现表格的隔行变色

    隔行变色使得用户在查看大量数据时能更容易地区分每一行,从而减轻视觉疲劳,提高阅读效率。本文将详细讲解如何实现表格的隔行变色,并提供相关的代码示例。 ### 一、CSS基础 隔行变色主要通过CSS(Cascading ...

    隔行颜色不同、隔行颜色不同

    在这个例子中,`:nth-child(2n)`选取所有偶数索引的行(即第二行、第四行等),`:nth-child(2n+1)`选取所有奇数索引的行(即第一行、第三行等)。通过调整`background-color`属性,我们可以改变行的背景色。 然而,...

    Windows界面编程第八篇 listbox彩色显示隔行变色

    《Windows界面编程第八篇 listbox彩色显示隔行变色》 http://blog.csdn.net/morewindows/article/details/8656061 配套程序 示范了如何彩色显示listbox控件,并让其隔行变色。 Win32或MFC程序均能使用。

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    JavaScript表格隔行变色是一种常见的前端视觉效果,通过为表格中的行设置不同的背景颜色,使得用户浏览时能够更加容易地分辨不同的行。这种效果通常用于增强用户的阅读体验。 #### 知识点2:原生JavaScript实现方法...

    jQuery轻松实现表格的隔行变色和点击行变色的实例代码

    除此之外,本文还介绍了滑动变色的效果,即当鼠标移动到某一行上时,该行的背景颜色会改变;当鼠标离开时,颜色又恢复到原始状态。这同样是通过为表格行添加mouseover和mouseout事件来实现的,利用jQuery的addClass...

    jquery表格隔行变色鼠标滑过竖直表格内容变色效果

    }`,这样交替出现的颜色就会形成隔行变色的效果。 接着,我们探讨"鼠标滑过时竖直表格内容变色"。这通常涉及到jQuery的`mouseover`和`mouseout`事件。当鼠标进入表格单元格时,我们改变单元格的样式,鼠标移出时再...

    LabView图形化编程语言之多列列表框上色隔行变色.zip

    2. **遍历每一行**:使用For循环,从第一行开始遍历到最后一行。 3. **判断行号**:在循环体内,通过比较当前行号(索引)与1的奇偶性,判断是否应该改变颜色。如果行号是偶数,设置为一种颜色;如果是奇数,设置为...

    简单实现jquery隔行变色

    通常情况下,表格中的第一行(tr)被视为奇数行,第二行视为偶数行。 接着,我们要用到的jQuery方法是 `.attr()`,它用于获取或设置HTML元素的属性和值。在这个场景下,我们通过 `.attr()` 方法修改行元素的 `bgColor...

    js实现表格隔行变色

    在网页设计中,为了提升数据展示的可读性和美观性,常常会采用隔行变色的技巧,使得表格中的每一行交替显示不同的颜色。这里提到的"js实现表格隔行变色"就是一种通过JavaScript来动态改变HTML表格行背景色的技术。在...

    php简单隔行变色功能实现代码 <font color=red>原创</font>

    在网页设计中,隔行变色是一种常见的视觉优化技巧,它可以提高用户在浏览表格或列表时的阅读体验。在PHP中实现这个功能并不复杂,主要通过编程逻辑来控制CSS样式,使得每一行根据其行号呈现出不同的背景颜色。本文将...

    JS实现列表页面隔行变色效果

    隔行变色的核心在于通过JavaScript遍历表格的每一行,并根据行的索引来决定背景颜色。以下是对这段JavaScript代码的详细解释: 1. `window.onload = function () {...}`: 这个函数确保了当整个页面加载完毕后才执行...

    JS与jQuery实现隔行变色的方法

    这样,所有偶数行的背景颜色都会变为灰色,形成隔行变色的效果。 接下来,我们看看jQuery实现的隔行变色。jQuery提供了更为简洁的语法,使得代码更易读、更高效。在jQuery中,我们可以利用`:even`选择器选取所有...

    表头拖动效果|表格隔行换色效果|大气的表格样式|选择行底色突出显示

    2. **表格隔行换色效果**:也称为交错行颜色或Zebra Striping,这是一种常见的优化可读性的设计技巧。通过在交替的行中使用不同的背景色,可以更轻松地引导用户的眼睛跟踪行间的差异,尤其是当数据量较大时。实现这...

    css美化表格让其隔行变色显示

    例如,通过为奇数行设置一种颜色,为偶数行设置另一种颜色,从而达到隔行变色的效果。 在上述提供的代码示例中,我们首先定义了一个CSS类 `.tablelist` 来修饰整个表格的样式。这个类设置了表格的边框、字体、边框...

    表格table隔行换色以及点击整行变色.rar

    这种效果通常被称为“斑马线”效果,因为它使得交替的行呈现出不同的颜色,从而帮助用户更容易地分辨出每一行。在HTML中,我们可以通过CSS(Cascading Style Sheets)来实现这一功能。以下是一个简单的CSS样式代码...

    高效的表格行背景隔行变色及选定高亮的JS代码

    首先,要实现隔行变色效果,我们需要在文档加载完成后对表格的每一行应用背景色。这通常通过CSS来实现,但是当我们涉及到更复杂的交互行为,例如鼠标悬停时的高亮显示和选中行的不同颜色表示时,就需要借助...

    css+js隔行换色

    因此,`2n`将匹配所有偶数索引的行(即第二行、第四行、第六行等),并应用背景颜色。 然而,如果网页需要动态加载数据或在用户交互时更新内容,CSS可能无法实时反映这些变化。这时,我们可以借助JavaScript。例如...

    jquery中tablesorter隔行颜色变化以及对应表格拖拽技术

    这段代码将表格中的每一行都设置为可拖动,当行被拖放到其他位置时,会自动调整行顺序,并触发TableSorter的更新,确保隔行变色仍然生效。 通过以上步骤,我们已经实现了表格的排序和行拖动功能,并且在拖动后仍能...

    纯JS代码实现隔行变色鼠标移入高亮

    在这个过程中,使用`if(i%2==0)`的条件判断语句来判断行的索引值,从而确定是奇数行还是偶数行,并分别给它们设置不同的背景颜色,实现隔行变色效果。 4. 鼠标移入高亮显示:在隔行变色的基础上,添加鼠标移入事件...

Global site tag (gtag.js) - Google Analytics