`

table隔行变色

阅读更多
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $(".stripe tr").mouseover(
       //如果鼠标移到class为stripe的表格的tr上时,执行函数
       function() {
          $(this).addClass("over");
       }
   ).mouseout(
       //给这行添加class值为over,并且当鼠标一出该行时执行函数
       function(){
          $(this).removeClass("over");
       }
   )  
   
   //给class为stripe的表格的偶数行添加class值为alt
   $(".stripe tr:even").addClass("alt");
});
</script>
<style>
th {
        background:#0066FF;
        color:#FFFFFF;
        line-height:20px;
        height:30px;
}
 
td {
        padding:6px 11px;
        border-bottom:1px solid #95bce2;
        vertical-align:top;
        text-align:center;
}
 
tr.alt td {
        background:#ecf6fc;  /*这行将给所有的tr加上背景色*/
}
 
tr.over td {
        background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/
}
 
</style>

<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
	<thead>
	  <tr>
		<th>姓名</th>
		<th>Email</th>
	  </tr>
	</thead>
<tbody>
	  <tr>
		<td>邓国梁</td>
		<td>gl.deng@gmail.com</td>
	  </tr>
	  <tr>
		<td>邓国梁</td>
		<td>gl.deng@gmail.com</td>
	  </tr>
	  <tr>
		<td>邓国梁</td>
		<td>gl.deng@gmail.com</td>
	  </tr>
	  <tr>
		<td>邓国梁</td>
		<td>gl.deng@gmail.com</td>
	  </tr>
</tbody>
</table>
分享到:
评论

相关推荐

    CSS+JS实现table隔行变色

    对于table隔行变色,我们可以创建一个类,比如`.zebra-stripes`,然后将这个类添加到包含表格的`&lt;table&gt;`元素上。以下是一个简单的CSS示例: ```css .table.zebra-stripes tr:nth-child(odd) { background-color: ...

    CSS2+JS实现table隔行变色

    在网页设计中,为了提升数据表格的可读性,我们经常需要实现表格的隔行变色效果。这个功能可以通过结合CSS2和JavaScript来轻松完成。本文将详细介绍如何使用这两种技术来实现这一效果,并提供一个简单易懂的示例供您...

    jquery选取商品隔行变色

    在网页设计中,为了提升用户体验和视觉效果,我们经常需要对数据列表进行美化处理,比如隔行变色。"jQuery选取商品隔行变色"是一个常见的网页交互功能,主要用于电商网站的商品列表展示,使得用户在浏览长列表时能更...

    表格渲染(悬浮变色,隔行换色,点击变色)

    /** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */

    Table隔行变色的JavaScript代码

    在本段内容中,主要讲述了如何使用JavaScript(js)来实现表格(table)的隔行变色效果,同时响应鼠标交互事件,即鼠标悬停时改变行的背景颜色。以下是详细的知识点解析: 1. 表格隔行变色实现原理:利用JavaScript...

    隔行变色的表格(Table)

    比较实用的隔行变色的table,带js和复选框,全选反选

    表格颜色自动隔行变色

    "表格颜色自动隔行变色"是一种常见的美化技巧,它可以使表格看起来更清晰、更易读,帮助用户快速区分不同行的数据。这个功能在Excel、WPS表格、Google Sheets等常见表格软件中都有提供。下面我们将深入探讨这一主题...

    jQuery动态生成隔行变色的table

    在网页开发中,为了提升用户体验,我们经常需要对表格数据进行视觉优化,其中一种常见的方法是实现隔行变色的效果。这个技术可以帮助用户更轻松地分辨表格中的每一行数据,提高阅读的舒适度。本教程将详细介绍如何...

    网页里面表格隔行变色代码

    在网页设计中,为了提升数据可读性和美观性,经常需要对表格进行隔行变色的处理。这种技术主要是通过CSS(层叠样式表)来实现的,使得表格的每一行交替显示不同的背景颜色,从而形成视觉上的区分。在本案例中,"网页...

    实现表格的隔行变色

    在网页设计中,为了提升数据展示的可读性和美观性,常常会采用隔行变色的技巧来对表格进行美化。隔行变色使得用户在查看大量数据时能更容易地区分每一行,从而减轻视觉疲劳,提高阅读效率。本文将详细讲解如何实现...

    表格隔行变色

    在网页设计中,表格隔行变色是一种常见的视觉优化手段,它能帮助用户更清晰地分辨数据行,提高阅读和理解效率。特别是在处理大量数据的时间表格中,这种效果尤为重要。"表格隔行变色"技术通常结合JavaScript和CSS来...

    razor table分页、隔行变色 table_pages_color_demo

    本示例“razor table分页、隔行变色 table_pages_color_demo”专注于如何在网页上展示数据,同时实现表格的分页功能和隔行变色效果,以提高用户体验。 首先,我们需要理解`razor`语法。Razor视图引擎的核心是`....

    jquery 15天学习笔记 02 table表格 隔行变色的问题

    隔行变色是一种常见的网页设计技巧,它能提高表格数据的可读性,使用户更容易区分和浏览数据行。 首先,我们需要了解HTML表格的基本结构,它由`&lt;table&gt;`元素作为容器,`&lt;tr&gt;`元素表示行,`&lt;th&gt;`元素用于表头,而`...

    使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

    废话不多说了,直接给大家贴代码了,具体代码如下所示: &lt;&#37;@ page language=java import=java.util.* pageEncoding=UTF-8%&gt; &lt;... &lt;head&gt;... &lt;div class=table-responsive&gt; &lt;tabl

    JQ 隔行变色

    标题“JQ 隔行变色”指的是使用jQuery(简称JQ)库来实现HTML表格或其他列表元素的隔行变色效果。这种效果常见于数据展示,通过交替颜色增加可读性和视觉吸引力。让我们深入了解一下如何实现这个功能以及相关的...

    jquery table ui插件制作css表格隔行变色特效代码

    总结,实现`jQuery table UI`插件制作的CSS表格隔行变色特效,主要分为以下几步: 1. 创建基本的HTML表格结构。 2. 引入`jQuery`库和`Table UI`插件的CSS和JS文件。 3. 使用`jQuery`选择器和CSS样式实现隔行变色。 4...

    jquery table鼠标滑过隔行变色表格样式代码

    jQuery 与 HTML 表格(table)的结合可以实现许多实用的功能,如本例中的“鼠标滑过隔行变色”效果。这种效果能够提升用户的交互体验,使得用户在浏览数据密集型表格时更容易区分每一行。 要实现这个功能,我们需要...

    表格隔行变色,jquerys

    在网页设计中,为了提高数据可读性和用户体验,经常需要对表格进行隔行变色处理。这使得用户在浏览大量数据时更容易区分不同的行。在本案例中,我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的...

    纯CSS控制tabel隔行变色

    纯CSS控制tabel隔行变色,html文件一个,查看源码即可

Global site tag (gtag.js) - Google Analytics