您的位置：首页 > Web前端 > JQuery

多款jquery实现隔行换色、多选框选中变色【强大】

2012-03-26 21:11 543 查看
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=utf-8" />
<title>多款jquery实现隔行换色、多选框选中变色</title>
<style>
table{
border-collapse:collapse;
}
tr,td{
padding:3px;
}
.first{
background-color:#F6C;
}
.one{
background-color:#FCF;
}
.two{

background-color:#FFC;
}
.mouse{
background-color:#99C;
}
.selected{
background-color:#9CF;
}
</style>

<script language="javascript" type="text/javascript" src="../jquery-1.7.1.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function (){

//***************************table1*******************************************
//设置第一行的颜色
$("#table1 tr:first").addClass("first");
//设置单行双行的颜色
$("#table1 tr:not(:first):even").addClass("one");
$("#table1 tr:not(:first):odd").addClass("two");

//鼠标over和out是颜色的改变
$("#table1 tr:not(:first)").hover(function (){

$(this).toggleClass("mouse");

}, function (){

$(this).toggleClass("mouse");

});
//点击时改变当前tr的颜色
$("#table1 tr:not(:first)").click(function (){

$(this).toggleClass("selected");

});

//***************************table2*******************************************
//设置第一行的颜色
$("#table2 tr:first").addClass("first");
//设置单行双行的颜色
$("#table2 tr:not(:first):even").addClass("one");
$("#table2 tr:not(:first):odd").addClass("two");

//鼠标over和out是颜色的改变
$("#table2 tr:not(:first)").hover(function (){

$(this).toggleClass("mouse");

}, function (){

$(this).toggleClass("mouse");

});
//点击时改变当前tr的颜色,并选中
$("#table2 tr:not(:first)").toggle(function (){

$(this).addClass("selected").find("input").attr("checked",true);
},function (){

$(this).removeClass("selected").find("input").attr("checked",false);
});

//***************************table3*******************************************
//设置第一行的颜色
$("#table3 tr:first").addClass("first");
//设置单行双行的颜色
$("#table3 tr:not(:first):even").addClass("one");
$("#table3 tr:not(:first):odd").addClass("two");

//鼠标over和out是颜色的改变
$("#table3 tr:not(:first)").hover(function (){

$(this).toggleClass("mouse");

}, function (){

$(this).toggleClass("mouse");

});

//点击时改变当前tr的颜色,并选中
$("#table3 tr:not(:first)").click(function (){
$("tr").removeClass("selected");
$(this).addClass("selected").find("input").attr("checked",true);

});

});

</script>
</head>
<body>
<h3>demo1 隔行、滑动、点击、变色</h3>
<br />
<table width="500" id="table1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>手机</th>
<th>邮箱</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>足球</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>篮球</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>乒乓球</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>篮球</td>
</tr>
<tr>
<td>小七</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>足球</td>
</tr>
<tr>
<td>小八</td>
<td>女</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>乒乓球</td>
</tr>
<tr>
<td>小九</td>
<td>女</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>足球</td>
</tr>
</table>
<br />

<h3>demo2 隔行、滑动、点击、变色+多选框选中的行 变色</h3>
<br />
<table width="500" id="table2">
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>手机</th>
<th>邮箱</th>
<th>爱好</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>足球</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>李四</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>篮球</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>王五</td>
<td>女</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>乒乓球</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>赵六</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>篮球</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>小七</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>足球</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>小八</td>
<td>女</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>乒乓球</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>小九</td>
<td>女</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>足球</td>
</tr>
</table>
<br />

<h3>demo3 隔行、滑动、点击、变色+单选框选中的行 变色</h3>
<br />
<table width="500" id="table3">
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>手机</th>
<th>邮箱</th>
<th>爱好</th>
</tr>
<tr>
<td><input type="radio" name="ra" /></td>
<td>张三</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>足球</td>
</tr>
<tr>
<td><input type="radio" name="ra" /></td>
<td>李四</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>篮球</td>
</tr>
<tr>
<td><input type="radio" name="ra" /></td>
<td>王五</td>
<td>女</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>乒乓球</td>
</tr>
<tr>
<td><input type="radio" name="ra" /></td>
<td>赵六</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>篮球</td>
</tr>
<tr>
<td><input type="radio" name="ra" /></td>
<td>小七</td>
<td>男</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>足球</td>
</tr>
<tr>
<td><input type="radio" name="ra" /></td>
<td>小八</td>
<td>女</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>乒乓球</td>
</tr>
<tr>
<td><input type="radio" name="ra" /></td>
<td>小九</td>
<td>女</td>
<td>159337512333</td>
<td>12@163.com</td>
<td>足球</td>
</tr>
</table>

</body>
</html>


效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航