jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

非侵入实现，控制更方便
效果图：
 


代码如下:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>javascript practice</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style type="text/css">
table{width:300px;}
caption{background:#DCA;}
th{background:#FCA;width:50%;}
td{text-align:center;}
</style>
<script type="text/javascript">
$(document).ready(function(){
odd= {"background":"#EDA","color":"#3F5"};//奇数样式
even={"background":"#2DA","color":"#875"};//偶数样式
odd_even("#table_test",odd,even);
});
function odd_even(id,odd,even){
$(id).find("tr").each(function(index,element){
if(index%2==1)
$(this).css(odd);
else
$(this).css(even);
});
}
</script>
</head>
<body>
<table id="table_test">
<caption>标题<caption>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr></li>
</body>
</html>

赞 (0)

相关推荐

  • 基于Jquery的表格隔行换色，移动换色，点击换色插件

    基于Jquery的表格隔行换色，移动换色，点击换色插件

    效果图:编写JQUERY插件如下: 复制代码 代码如下: ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 option=$.extend({ odd:"odd", even:"even", selected:"selected" },options); //注意这个options 同上面的function(options)中的opt

  • jQuery 选择表格(table)里的行和列及改变简单样式

    jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序.样式改变等等.如果你的英文够好,你可以读读这篇文章:jQuery table manipulation.本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助. 比如我们有这样一个表格: 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三

  • JQuery操作表格(隔行着色,高亮显示,筛选数据)

    JQuery操作表格(隔行着色,高亮显示,筛选数据)

    查了些资料,写了4个Demo: 1. 隔行着色 复制代码 代码如下: $('#table1 tr:odd').addClass('odd'); $('#table1 tr:even').addClass('even'); 效果: 2. 高亮含有特定数据的行 复制代码 代码如下: $("#table2 tr:contains('Fuck')").addClass("selected"); 3. 筛选数据 复制代码 代码如下: $("#filter"

  • jquery实现表格隔行换色效果

    jquery实现表格隔行换色效果

    本文实例讲述了jquery实现表格隔行换色效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 1.新建一个web项目,jQuery: 2.在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中: 3.同样,新建TableColor.html: TableColor.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  • jQuery实现表格颜色交替显示的方法

    本文实例讲述了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/xhtm

  • javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox

    // 版本: 1.0 // 日期: 2007/08/01 // 备注: 需要jQuery库 // 参考: Dodo(tableRowCheckboxToggle) 和 softcomplex(tigra_tables) function Kin_Tables(                     Kin_Table_GetTableMethod, //得到Table的方法 同$()功能 必选参数                     Kin_Table_Header_Offset, //从

  • 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=&qu

  • jquery 交替为表格添加样式的代码

    jquery 交替为表格添加样式的代码

    下面就是我的"作品"啊,只是简单的实现其功能,并未做其他的功能啊 运行后,需要刷新下, 上面得代码比较简单,更多的例子,可以搜索我们以前发布的文章. 表头 表头 表头 我们 jb51.net 4561263 123456 789879 4561263 123456 789879 4561263 123456 789879 4561263 123456 789879 4561263 123456 789879 4561263 123456 789879 4561263 123456 78

  • 用JQuery实现表格隔行变色和突出显示当前行的代码

    用JQuery实现表格隔行变色和突出显示当前行的代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> &l

  • jQuery表格行上移下移和置顶的实现方法

    jQuery表格行上移下移和置顶的实现方法

    我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. 运行效果图: HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr&

  • jquery自定义表格样式

    jquery自定义表格样式

    本文实例讲述了jquery自定义表格样式实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 上面这张图有3种状态,默认状态(灰白相间),鼠标悬浮状态(绿色),鼠标点击状态(黄色),是如何实现的呐? Html代码如下: <table> <thead> <tr> <td>编号</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </

随机推荐