`
jeelee
  • 浏览: 637640 次
  • 性别: 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>
分享到：
| jquery ajax 实现调用一个action中多个方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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. 鼠标移入高亮显示：在隔行变色的基础上，添加鼠标移入事件...

Magicbox
Global site tag (gtag.js) - Google Analytics