<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实现表格隔行变色</title>
</head>
<style type="text/css" media="all">
.datalist{
border:1px #000000 solid;
font-family:"宋体";
border-collapse:collapse;
background-color:#999999;
font-size:14px;
}
.datalist tr.altrow{
background-color:#003399;
}
</style>
<script language="javascript">
window.onload=function(){
var oTable = document.getElementById("oTable");
for(var i=0;i< oTable.rows.length;i++){
if(i%2==0){
oTable.rows[i].className="altrow";
}
}
}
</script>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th>传说中的文字111 </th>
<th>传说中的文字222 </th>
<th>传说中的文字333 </th>
</tr>
<tr><!--奇数行-->
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
</table>
</body>
</html>
使用 jquery后 把原来的javascript代码替换为下面的：、
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
</script>
分享到：
相关推荐
综上所述，实现"jquery table鼠标滑过隔行变色表格样式代码"涉及到HTML表格布局、CSS样式设计、jQuery选择器与事件处理等多方面知识。通过合理运用这些技术，我们可以创建出更具有吸引力和易用性的数据展示界面。在...
"表格颜色自动隔行变色"是一种常见的美化技巧，它可以使表格看起来更清晰、更易读，帮助用户快速区分不同行的数据。这个功能在Excel、WPS表格、Google Sheets等常见表格软件中都有提供。下面我们将深入探讨这一主题...
在网页设计中，为了提升用户体验和视觉效果，我们经常需要...这个功能不仅可以用于商品列表，还可以应用于其他任何需要隔行变色的场景，如论坛帖子、表格数据等。理解并掌握这一技巧，有助于提升网页的交互性和美观度。
在网页设计中，为了提升数据可读性和美观性，经常需要对表格进行隔行变色的处理。这种技术主要是通过CSS（层叠样式表）来实现的，使得表格的每一行交替显示不同的背景颜色，从而形成视觉上的区分。在本案例中，"网页...
在网页设计中，为了提升数据展示的可读性和美观性，常常会采用隔行变色的技巧来对表格进行美化。隔行变色使得用户在查看大量数据时能更容易地区分每一行，从而减轻视觉疲劳，提高阅读效率。本文将详细讲解如何实现...
比较实用的隔行变色的table，带js和复选框，全选反选
在网页设计中，表格隔行变色是一种常见的视觉优化手段，它能帮助用户更清晰地分辨数据行，提高阅读和理解效率。特别是在处理大量数据的时间表格中，这种效果尤为重要。"表格隔行变色"技术通常结合JavaScript和CSS来...
CSS+JS 实现表格隔行变色 鼠标移动变色
在Excel中，隔行变色是一种常见的数据可视化技巧，它能帮助用户更清晰地阅读和理解表格中的数据。这种效果通常通过条件格式化来实现，使得奇数行和偶数行显示不同的背景颜色，增强表格的可读性，特别是在处理大量...
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
在IT领域，网页开发是不可或缺的一部分，而表单数据验证、表格隔行变色效果、复选框操作、好友列表以及省市菜单联动效果都是网页交互中的常见功能。这些功能不仅提升了用户体验，也是开发者必备的技能。下面将详细...
在网页开发中，为了提升用户体验，我们经常需要对表格数据进行视觉优化，其中一种常见的方法是实现隔行变色的效果。这个技术可以帮助用户更轻松地分辨表格中的每一行数据，提高阅读的舒适度。本教程将详细介绍如何...
在某些情况下，为了提高数据的可读性和视觉效果，开发者可能会希望实现ListView的隔行变色功能。这可以通过编程方式实现，使得每两行之间具有不同的背景颜色，以创建一种对比，使用户更容易区分每一行。 标题"VB ...
在网页设计中，为了提高数据可读性和用户体验，经常需要对表格进行隔行变色处理。这使得用户在浏览大量数据时更容易区分不同的行。在本案例中，我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的...
为了提高用户的阅读体验，有时候我们需要对表格进行美化，例如实现隔行变色、鼠标滑过时选中变色等特效。本教程将详细介绍如何使用JavaScript来实现这些效果。 首先，让我们了解一下JavaScript在网页中的作用。...
在网页设计中，为了提升数据表格的可读性和视觉效果，常常会采用“隔行变色”的技巧。本文将深入探讨如何使用CSS和JavaScript来实现这一功能，以便在实际项目中应用。 首先，我们从CSS（层叠样式表）的角度出发。...
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
在网页设计中，为了提高数据可读性和用户体验，经常会在表格中使用隔行变色的技巧。本实例将详细介绍如何使用JavaScript实现这一功能。在HTML中，`<table>`元素用于创建表格，而通过JavaScript，我们可以动态地改变...
JavaScript表格隔行变色是一种常见的前端视觉效果，通过为表格中的行设置不同的背景颜色，使得用户浏览时能够更加容易地分辨不同的行。这种效果通常用于增强用户的阅读体验。 #### 知识点2：原生JavaScript实现方法...