<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实现隔行变色、设定焦点行颜色、改变显示值以及固定列不移动这四个关键功能,并提供相关的源码示例。 1. **隔行变色**: 隔行变色是一种常见的视觉增强技巧,它可以...
隔行变色使得用户在查看大量数据时能更容易地区分每一行,从而减轻视觉疲劳,提高阅读效率。本文将详细讲解如何实现表格的隔行变色,并提供相关的代码示例。 ### 一、CSS基础 隔行变色主要通过CSS(Cascading ...
在这个例子中,`:nth-child(2n)`选取所有偶数索引的行(即第二行、第四行等),`:nth-child(2n+1)`选取所有奇数索引的行(即第一行、第三行等)。通过调整`background-color`属性,我们可以改变行的背景色。 然而,...
《Windows界面编程第八篇 listbox彩色显示隔行变色》 http://blog.csdn.net/morewindows/article/details/8656061 配套程序 示范了如何彩色显示listbox控件,并让其隔行变色。 Win32或MFC程序均能使用。
JavaScript表格隔行变色是一种常见的前端视觉效果,通过为表格中的行设置不同的背景颜色,使得用户浏览时能够更加容易地分辨不同的行。这种效果通常用于增强用户的阅读体验。 #### 知识点2:原生JavaScript实现方法...
除此之外,本文还介绍了滑动变色的效果,即当鼠标移动到某一行上时,该行的背景颜色会改变;当鼠标离开时,颜色又恢复到原始状态。这同样是通过为表格行添加mouseover和mouseout事件来实现的,利用jQuery的addClass...
}`,这样交替出现的颜色就会形成隔行变色的效果。 接着,我们探讨"鼠标滑过时竖直表格内容变色"。这通常涉及到jQuery的`mouseover`和`mouseout`事件。当鼠标进入表格单元格时,我们改变单元格的样式,鼠标移出时再...
2. **遍历每一行**:使用For循环,从第一行开始遍历到最后一行。 3. **判断行号**:在循环体内,通过比较当前行号(索引)与1的奇偶性,判断是否应该改变颜色。如果行号是偶数,设置为一种颜色;如果是奇数,设置为...
通常情况下,表格中的第一行(tr)被视为奇数行,第二行视为偶数行。 接着,我们要用到的jQuery方法是 `.attr()`,它用于获取或设置HTML元素的属性和值。在这个场景下,我们通过 `.attr()` 方法修改行元素的 `bgColor...
在网页设计中,为了提升数据展示的可读性和美观性,常常会采用隔行变色的技巧,使得表格中的每一行交替显示不同的颜色。这里提到的"js实现表格隔行变色"就是一种通过JavaScript来动态改变HTML表格行背景色的技术。在...
在网页设计中,隔行变色是一种常见的视觉优化技巧,它可以提高用户在浏览表格或列表时的阅读体验。在PHP中实现这个功能并不复杂,主要通过编程逻辑来控制CSS样式,使得每一行根据其行号呈现出不同的背景颜色。本文将...
隔行变色的核心在于通过JavaScript遍历表格的每一行,并根据行的索引来决定背景颜色。以下是对这段JavaScript代码的详细解释: 1. `window.onload = function () {...}`: 这个函数确保了当整个页面加载完毕后才执行...
这样,所有偶数行的背景颜色都会变为灰色,形成隔行变色的效果。 接下来,我们看看jQuery实现的隔行变色。jQuery提供了更为简洁的语法,使得代码更易读、更高效。在jQuery中,我们可以利用`:even`选择器选取所有...
2. **表格隔行换色效果**:也称为交错行颜色或Zebra Striping,这是一种常见的优化可读性的设计技巧。通过在交替的行中使用不同的背景色,可以更轻松地引导用户的眼睛跟踪行间的差异,尤其是当数据量较大时。实现这...
例如,通过为奇数行设置一种颜色,为偶数行设置另一种颜色,从而达到隔行变色的效果。 在上述提供的代码示例中,我们首先定义了一个CSS类 `.tablelist` 来修饰整个表格的样式。这个类设置了表格的边框、字体、边框...
这种效果通常被称为“斑马线”效果,因为它使得交替的行呈现出不同的颜色,从而帮助用户更容易地分辨出每一行。在HTML中,我们可以通过CSS(Cascading Style Sheets)来实现这一功能。以下是一个简单的CSS样式代码...
首先,要实现隔行变色效果,我们需要在文档加载完成后对表格的每一行应用背景色。这通常通过CSS来实现,但是当我们涉及到更复杂的交互行为,例如鼠标悬停时的高亮显示和选中行的不同颜色表示时,就需要借助...
因此,`2n`将匹配所有偶数索引的行(即第二行、第四行、第六行等),并应用背景颜色。 然而,如果网页需要动态加载数据或在用户交互时更新内容,CSS可能无法实时反映这些变化。这时,我们可以借助JavaScript。例如...
这段代码将表格中的每一行都设置为可拖动,当行被拖放到其他位置时,会自动调整行顺序,并触发TableSorter的更新,确保隔行变色仍然生效。 通过以上步骤,我们已经实现了表格的排序和行拖动功能,并且在拖动后仍能...
在这个过程中,使用`if(i%2==0)`的条件判断语句来判断行的索引值,从而确定是奇数行还是偶数行,并分别给它们设置不同的背景颜色,实现隔行变色效果。 4. 鼠标移入高亮显示:在隔行变色的基础上,添加鼠标移入事件...