jQuery简单实现表格隔行换色+鼠标经过时样式
< !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>jQuery表格隔行换色+鼠标经过时样式</title>
<script src="http://wlog.cn/lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#mytable tr").mouseover(function(){
$(this).addClass("t_over");//鼠标移到ID为mytable的表格的tr上时，执行函数
});
$("#mytable tr").mouseout(function(){
$(this).removeClass("t_over");//移除该行的class
});
$("#mytable tr:odd").addClass("t_color");//even----奇数,and odd----偶数
/* $("#mytable2").find("tr").each(function(i){
if(i%2 != 0){
$(this).addClass("t_color");
}
});//each实现表格偶数行换色
*/
})
</script>
<style>
*{margin:0px; padding:0px;}
body {margin-top:20px;}
table {width:600px; margin:0px auto; border-collapse:collapse; border:1px #e4e4e4 solid;}
td,th {border:1px #e4e4e4 solid; text-align:center;}
caption {background:#0099CC; margin:0;}
.t_over {background:#cccccc;}
.t_color {background:#ecf6fc; }
tr,th,caption {line-height:30px;}
</style>
</head>
<body>
<table id="mytable">
<caption>这是一个表格</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>李飞</td>
<td>21</td>
<td>男</td>
</tr>
<tr>
<td>李宇</td>
<td>31</td>
<td>女</td>
</tr>
<tr>
<td>王三</td>
<td>33</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>女</td>
</tr>
</table>
<table id="mytable2">
<caption style="margin-top:30px;">这是一个表格</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>李飞</td>
<td>21</td>
<td>男</td>
</tr>
<tr>
<td>李宇</td>
<td>31</td>
<td>女</td>
</tr>
<tr>
<td>王三</td>
<td>33</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>女</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能，当鼠标在HTML表格上移动时，所经过的单元格会改变颜色，并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...
总之，"jQuery 鼠标移动到表格变色特效"是一个利用jQuery处理鼠标事件并改变元素样式的实例，通过学习这个例子，开发者可以掌握jQuery的基本用法，了解如何结合CSS实现交互效果，这对于创建动态、响应式的网页界面至...
在“jquery 框选变色”这个主题中，我们将探讨如何利用jQuery实现对HTML表格（table）中的选定单元格（td）进行颜色变化的功能。 首先，我们需要理解HTML表格的基本结构。一个表格由`<table>`元素定义，内部包含行`...
以上就是使用jQuery实现表格行变色的基本方法和可能的扩展。在实际项目中，可能需要根据具体需求进行调整和优化。记得在开发过程中，确保代码的可读性和性能，遵循良好的编程习惯，以便于维护和扩展。
以上就是使用jQuery实现“商品隔行变色”的基本步骤和相关知识点。这个功能不仅可以用于商品列表，还可以应用于其他任何需要隔行变色的场景，如论坛帖子、表格数据等。理解并掌握这一技巧，有助于提升网页的交互性和...
另外，为了实现表格数据动态加载，我们可以使用Ajax获取服务器数据，然后使用jQuery的`append()`方法将数据插入到表格中。这通常涉及到JSON格式的数据和服务器端的API接口。 总的来说，这个"jQuery Table点击选中...
在“jquery操作表格隔行,滑动,点击,变色”这个主题中，我们将深入探讨如何使用jQuery来增强HTML表格的功能，包括隔行变色、滑动效果、点击响应以及多选框选中行的变色。 1. **隔行变色**：在HTML表格中，为了提高...
本教程将详细讲解如何使用jQuery实现一个仿Excel表格的选中变色效果，以增强用户界面的交互性。 首先，我们需要理解jQuery的基本用法。jQuery的核心在于它的选择器，它允许我们高效地选取DOM元素。例如，`$("#...
《jQuery仿Excel表格选中单元格变色特效详解》 在网页开发中，有时我们需要创建类似Excel的功能，比如用户能够选择表格中的单元格，并且选中的单元格有明显的视觉反馈，例如变色。jQuery作为一款强大的JavaScript库...
《锋利的jquery》利用siblings（）,attr（）方法实现表单变色
本资源“jQuery Table选中表格行变色代码.zip”提供了一个实用的功能，即当用户点击表格中的某一行时，该行会变色，以突出显示用户的选择。这个功能在数据展示和交互性较强的网页中十分常见，例如在数据分析、电商...
在探讨如何使用JavaScript结合jQuery库实现表格的一些交互效果之前，我们先要了解一些基础知识点。 首先，JavaScript是一种广泛用于网页客户端编程的脚本语言，它让网页能够拥有更动态和交互性的特性。而jQuery是一...
在本文中，我们将深入探讨如何使用jQuery实现一个仿Excel表格的选中单元格变色特效。这个功能允许用户在网页上的表格中通过鼠标操作选择单个或多个单元格，同时改变选中单元格的背景颜色，以模拟Excel的交互体验。 ...