练习例子
关于改变table表格 隔行变色的问题
<!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=utf-8" />
<title>15天jquery-02</title>
<script type="text/javascript" src="jquery-1.4.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
$(".stripe tr:even").addClass("alt");//even 是偶数 奇数 是 ood
});
</script>
<style type="text/css">
th{ background:#0066ff; color:#fff; line-height:20px; height:30px;}
td{ padding:6px 11px; border-bottom:1px solid #95bce2;}
td *{padding:6px 11px;}
tr.alt td{ background:#ecf6fc;}
tr.over td{ background:#bcd4ec;}
</style>
</head>
<body>
<table class="stripe" width="50%" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
</tr>
</thead>
<tbody>
<tr>
<td>梁国政</td>
<td>33</td>
<td>25882937</td>
</tr>
<tr>
<td>梁国政</td>
<td>33</td>
<td>25882937</td>
</tr>
<tr>
<td>梁国政</td>
<td>33</td>
<td>25882937</td>
</tr>
<tr>
<td>梁国政</td>
<td>33</td>
<td>25882937</td>
</tr>
<tr>
<td>梁国政</td>
<td>33</td>
<td>25882937</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
在网页设计中，为了提升数据可读性和美观性，经常需要对表格进行隔行变色的处理。这种技术主要是通过CSS（层叠样式表）来实现的，使得表格的每一行交替显示不同的背景颜色，从而形成视觉上的区分。在本案例中，"网页...
总结，实现`jQuery table UI`插件制作的CSS表格隔行变色特效，主要分为以下几步： 1. 创建基本的HTML表格结构。 2. 引入`jQuery`库和`Table UI`插件的CSS和JS文件。 3. 使用`jQuery`选择器和CSS样式实现隔行变色。 4...
"jQuery选取商品隔行变色"是一个常见的网页交互功能，主要用于电商网站的商品列表展示，使得用户在浏览长列表时能更清晰地区分各个项目。下面将详细解释如何使用jQuery实现这一功能。 首先，我们需要理解jQuery库的...
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
本教程将详细介绍如何使用jQuery、CSS和JSON来动态生成具有隔行变色效果的表格。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在本场景中，我们将利用jQuery的便利性来动态...
从给定的文件信息中，我们可以提炼出以下知识点： ### JavaScript表格隔行变色 ...通过上述知识点，我们可以系统地理解如何使用JavaScript和JQuery实现表格隔行变色和Tab标签页特效，以及这些技术在前端开发中的应用。
通过学习和理解这些代码，你可以更深入地掌握如何使用jQuery进行隔行变色操作。 总结，使用jQuery实现表格隔行变色是一种常见的网页美化技术，它提高了数据展示的清晰度，使用户更容易阅读和理解表格内容。通过选择...
对于table隔行变色，我们可以创建一个类，比如`.zebra-stripes`，然后将这个类添加到包含表格的`<table>`元素上。以下是一个简单的CSS示例： ```css .table.zebra-stripes tr:nth-child(odd) { background-color: ...
jQuery 与 HTML 表格（table）的结合可以实现许多实用的功能，如本例中的“鼠标滑过隔行变色”效果。这种效果能够提升用户的交互体验，使得用户在浏览数据密集型表格时更容易区分每一行。 要实现这个功能，我们需要...
在网页设计中，为了提升数据展示的可读性和美观性，常常会采用隔行变色的技巧来对表格进行美化。隔行变色使得用户在查看大量数据时能更容易地区分每一行，从而减轻视觉疲劳，提高阅读效率。本文将详细讲解如何实现...
网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
在网页设计中，表格（Table）是常见的数据展示方式，而为了提高用户体验，常常需要对表格进行美化，比如隔行变色以及高亮显示当前选中的行。本篇将详细介绍如何使用jQuery实现这一功能。 首先，jQuery是一个轻量级...
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画制作等任务。在“jquery操作表格...在开发过程中，记得利用jQuery的文档和社区资源，以便解决可能出现的问题和扩展更多功能。
本示例“razor table分页、隔行变色 table_pages_color_demo”专注于如何在网页上展示数据，同时实现表格的分页功能和隔行变色效果，以提高用户体验。 首先，我们需要理解`razor`语法。Razor视图引擎的核心是`....
本资源"jQuery实现table表格鼠标经过隔行换颜色特效代码.zip"提供了一种方法，利用jQuery来实现在网页中table表格鼠标悬停时的视觉效果，即隔行变色。这一功能对于提升用户体验，使得用户在浏览数据密集型表格时能更...
总结来说，本文提供的实例代码不仅清晰地演示了如何用jQuery实现表格的隔行变色和点击行变色，而且强调了jQuery在网页交互设计中的实用性和有效性。通过编写简单的jQuery脚本，可以极大地增强网页的功能和用户的交互...
在网页设计中，为了提升用户体验，常常会在表格中使用隔行换色的技巧，使得数据更易读。本文将详细讲解如何使用jQuery（简称JQ）来实现这一功能。 首先，我们要了解基本步骤： 1. **引入jQuery库**：在HTML文件中...