jquery奇偶行差异底色呈现,点击换色插件葡京娱乐场

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”
lang=”en”>
<head>
<title></title>
<style>
table{ width:400px; border:1px solid
#FFF02F;border-collapse:collapse;}
tr{ cursor:pointer;}
td{ font:normal 12px/17px
Arial;padding:2px;width:100px;}
th{
background:#FFF02F; font:bold 12px/17px
Arial;text-align:left;padding:4px;border-bottom:1px solid
#333;}
.even{
background:#FFF38F;}  /*
偶数行样式*/
.odd{
background:#FFFFEE;}  /*
奇数行样式*/
.selected{
background:#FF6500;color:#fff;}
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function() {
    var $trs = $(“#trs>tr”);  //选用具备行
   
$trs.filter(“:odd”).addClass(“odd”);  //给奇数行增多odd样式
   
$trs.filter(“:even”).addClass(“even”);//给偶数行增添odd样式

效果图:
葡京娱乐场 1
编制JQUECRUISERY插件如下:

    //点击行,增多变色样式
   
$trs.click(function(e){
        $(this).addClass(“selected”)
        .siblings().removeClass(“selected”);
    })

复制代码 代码如下:

    //实时筛选
   
$(“#filter”).keyup(function(){
        $trs.show();
        if(this.value !=””) {
            $trs.hide()
            .filter(“:contains(‘”+this.value+”‘)”).show();
        }
        $trs.removeClass(“odd”);
        $trs.removeClass(“even”);
        $trs.filter(“:contains(‘”+this.value+”‘):odd”).addClass(“odd”);  //给奇数行增多odd样式
       
$trs.filter(“:contains(‘”+this.value+”‘):even”).addClass(“even”);//给偶数行加多odd样式
    })
})
</script>
</head>
<body>
过滤:<input type=”text”
id=”filter”/>
<table>
    <thead>
    <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody id=”trs”>
        <tr><td>张山</td><td>男</td><td>广西福州</td></tr>
        <tr><td>李4</td><td>女</td><td>吉林底特律</td></tr>
        <tr><td>张山sss</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>
        <tr><td>Rain</td><td>男</td><td>湖南阿塞拜疆巴库</td></tr>
        <tr><td>MAXMAN</td><td>女</td><td>西藏阿塞拜疆巴库</td></tr>
        <tr><td>王5fd</td><td>男</td><td>江西西安</td></tr>
        <tr><td>找df6</td><td>男</td><td>西藏乌兰巴托</td></tr>
        <tr><td>Rain1二</td><td>男</td><td>广东大阪</td></tr>
        <tr><td>MAXMAN5</td><td>女</td><td>山西卢布尔雅那</td></tr>
    </tbody>
</table>
</body>
</html>

;(function($) {
$.fn.extend({
“alterBgColor”:function(options){
//设置暗许值
option=$.extend({
odd:”odd”,
even:”even”,
selected:”selected”
},options); //注意那么些options
同下面的function(options)中的option是同2个对象
//隔行变色
$(“tbody>tr:enev”,this).addClass(option.even);
$(“tbody>tr:odd”,this).addClass(option.odd);
//单击行变色
$(‘tbody>tr’,this).click(function(){
var hasSelected = $(this).hasClass(option.selected);
$(this)[hasSelected?”removeClass”:”addClass”](option.selected)
.find(“:checkbox”).attr(‘checked’,!hasSelected);
});
$(“tbody>tr:has(:checked)”,this).addClass(option.selected);
return this; //重返this,使艺术可链
}
});
})(jQuery);

二、应用JQUERY插件

复制代码 代码如下:

$(function(){
//按默许类
$(“#table2”).alterBgColor()
.find(“th”).css(“font-size”,”18″);
//自定义类,给定值;
$(“#table1”).alterBgColor({
odd:”odd1″,
even:”even1″,
selected:”mselected”
}).find(“th”).css(“font-size”,”18″);
})

三、多少个不等的报表结构:

复制代码 代码如下:

<table width=”394″ height=”115″ border=”0″ cellpadding=”3″
cellspacing=”1″ id=”table2″>
<thead class=”caption”>
<tr id=”title”>
<th> </th>
<th height=”32″>姓名</th>
<th>姓别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name=”id” type=”checkbox” value=”1″
/></td>
<td>王锋</td>
<td>男</td>
<td>香港海淀区肖家河</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”2″
/></td>
<td>王兴</td>
<td>女</td>
<td>广东南宁</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”3″
/></td>
<td>李明</td>
<td>男</td>
<td>香港昌平区回龙观</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”4″
/></td>
<td>程子</td>
<td>男</td>
<td>法国巴黎西恩平市</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”5″
/></td>
<td>赵垛稳</td>
<td>男</td>
<td>香港海淀区上地</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”6″
/></td>
<td>陈曦</td>
<td>女</td>
<td>时尚之都海淀区万泉庄</td>
</tr>
</tbody>
</table>

<table width=”394″ height=”115″ border=”0″ cellpadding=”3″
cellspacing=”1″ id=”table1″>
<thead class=”caption”>
<tr id=”title”>
<th> </th>
<th height=”32″>姓名</th>
<th>姓别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name=”id” type=”checkbox” value=”1″
/></td>
<td>王锋</td>
<td>男</td>
<td>香岛海淀区肖家河</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”2″
/></td>
<td>王兴</td>
<td>女</td>
<td>山东中山</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”3″
/></td>
<td>李明</td>
<td>男</td>
<td>法国巴黎昌平区回龙观</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”4″
/></td>
<td>程子</td>
<td>男</td>
<td>新加坡西德庆县</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”5″
/></td>
<td>赵垛稳</td>
<td>男</td>
<td>东京海淀区上地</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”6″
/></td>
<td>陈曦</td>
<td>女</td>
<td>北京海淀区万泉庄</td>
</tr>
</tbody>
</table>

四、样式如下:

复制代码 代码如下:

<style>
.even{ background:#E3C575;}
.odd{ background:#D5D500;}
.selected{ background:#FF6262; color:#FFFFFF;}
table{ border:#666666 1px solid; font-size:12px;}
table .caption{ background:#B0B0FF; color:#FFFFFF; test-align:left;}
.even1{ background:#C6FBB9;}
.odd1{ background:#FFB9DC;}
.mselected{ background:#F5CEA7; color:#FFFFFF;}
</style>

就此甘休,希望我们都给 me–批评探讨,多谢!
假设不知道请与自己(王锋 QQ:1552593九陆)联系.

复制代码 代码如下:

(function($){
$.fn.extend({
“SetTableBgColor”:function(options){
//设置暗中同意样式值
option=$.extend({
odd:”odd”,//奇数行
even:”even”,//偶数航
selected:”selected”,//选中行
over:”over”//鼠标移动上去时
},options);//此处options与function里的参数为同二个对象
//隔行换色
$(“tbody>tr:even”,this).addClass(option.even);
$(“tbody>tr:odd”,this).addClass(option.odd);
//单击行变色
$(“tbody>tr”,this).click(function(){
$(“tbody>tr”).removeClass(option.selected);
//var hasSelected=$(this).hasClass(option.selected);//再次回到true或false
查询是还是不是曾经包蕴点击状态下的样式
$(this).addClass(option.selected);//给选中行增添样式
[hasSelected?”removeClass”:”addClass”]基于是不是带有移除和足够体制
});
//鼠标移动上去变色
$(“tbody>tr”,this).mouseover(function(){
$(this).addClass(option.over);
});
//鼠标移出时变回原来的体制
$(“tbody>tr”,this).mouseout(function(){
$(this).removeClass(option.over);
});
return this;//重返this,使艺术可链 注意 这里不可不回到
不然无从直接的调用方法
}
});
})(jQuery);//那些地点(jquery)必须抬高,不然会报错
//调用方法
// $(“.TableList”).SetTableBgColor({
// odd:””,
// even:”alt”,
// selected:”selected”,
// over:”over”
// });

/201012/yuanma/SetTableBgColor.rar

您或者感兴趣的著作:

相关文章