xiangqian0505
- 浏览: 321626 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
ayidaweiwei：
上面已经写得很清楚了,吧里data 里面的数据定义成一个Bea ...
json对象转换成复杂Bean（包括bean、list<Bean>、Object） -
chaohua2012：
你好，如果json是这种形式呢"type" ...
json对象转换成复杂Bean（包括bean、list<Bean>、Object） -
a6892509：
大神呀
Java异常处理心得 -
liubaolin123：
请问有源码么？
restlet2.0.6+spring3.2.2+mybatis3.2.3 集成 -
xiangqian0505：
xiangqian0505 写道duan_1991 写道文章不 ...
Java异常处理心得
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
//demo1:
//-隔行,滑动,点击 变色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
$('.cssraindemo1 tbody tr').click(
function() {$(this).toggleClass('selected');}
);
//demo2:
$('.cssraindemo2 tbody tr:even').addClass('odd');
$('.cssraindemo2 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果复选框默认情况下是选择的，变色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('.cssraindemo2 tbody tr').click(
function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).find('input[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('selected');
$(this).find('input[type="checkbox"]').attr('checked','checked');
}
}
);
//demo3:
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果单选框默认情况下是选择的，变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');
// 单选框
$('.cssraindemo3 tbody tr').click(
function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
$(this).find('input[type="radio"]').attr('checked','checked');
}
);
});
//-->
</SCRIPT>
<style type="text/css">
h1 { font:bold 20px/26px Arial;}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
tr.odd { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected { background:#aaaaaa;color:#fff;}
</style>
<!-- demo1 -->
<h1>Demo1--隔行,滑动,点击 变色.</h1>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
<!-- demo2 -->
<h1>Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo3 -->
<h1>Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
//demo1:
//-隔行,滑动,点击 变色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
$('.cssraindemo1 tbody tr').click(
function() {$(this).toggleClass('selected');}
);
//demo2:
$('.cssraindemo2 tbody tr:even').addClass('odd');
$('.cssraindemo2 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果复选框默认情况下是选择的，变色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('.cssraindemo2 tbody tr').click(
function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).find('input[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('selected');
$(this).find('input[type="checkbox"]').attr('checked','checked');
}
}
);
//demo3:
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果单选框默认情况下是选择的，变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');
// 单选框
$('.cssraindemo3 tbody tr').click(
function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
$(this).find('input[type="radio"]').attr('checked','checked');
}
);
});
//-->
</SCRIPT>
<style type="text/css">
h1 { font:bold 20px/26px Arial;}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
tr.odd { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected { background:#aaaaaa;color:#fff;}
</style>
<!-- demo1 -->
<h1>Demo1--隔行,滑动,点击 变色.</h1>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
<!-- demo2 -->
<h1>Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo3 -->
<h1>Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
- jquery-1_1_.2.1.pack.rar (13.3 KB)
- 下载次数: 2
分享到：
发表评论
-
js 克隆 Clone
2013-06-18 16:39 1070Object.prototype.Clone=functi ... -
使用JavaScript在IE和Firefox下进行iframe的DOM操作
2013-04-27 16:33 1130IE和Firefox对iframe document对象的差 ... -
IE文本框内容右对齐后光标消失
2012-12-20 16:42 1933<input type="text" ... -
jquery多级联动下拉插件chained（附DEMO）
2012-10-29 16:39 1746<!DOCTYPE html PUBLIC " ... -
基于jQuery的Spin Button自定义文本框数值自增或自减（测试案例）
2012-07-23 10:33 1653/** * jquery.spin.js * ... -
AJAX同步 JS方法顺序执行
2012-06-19 09:33 10895//保存前执行的方法,ajax同步调用后台验证包裹单号是否存在 ... -
JS 设置下拉选择框默认值
2012-06-14 10:12 5728//根据下拉对象默认选中后台对应的记录 function ... -
Javascript 汉字转首字母的拼音（支持多音字的选择）
2012-02-27 13:27 11572这是html代码，保存为html格式的文件，将下面的js代码保 ... -
javascript:history.go()和History.back()的区别
2012-02-10 10:35 1457<input type=button value=刷新 ... -
漂亮的时间选择框
2011-12-08 17:09 1810<html> <script langua ... -
时间 分钟 选择框
2011-12-08 17:04 1664功能预览： <html& ... -
关闭窗口产生js的事件
2011-12-05 22:15 1159/************ 关闭窗口，提交评价 **** ... -
js禁止右键、F5刷新 ctrl+回车 js格式化日期
2011-12-05 22:12 1579//js禁止右键、F5刷新 function noAcion ... -
js 弹出提示遮罩层
2011-12-03 01:10 1896<HTML> <body> ... -
js显示动态时间
2011-12-03 00:30 17543Date对象的方法 Date 对象能够使你获得相对于国际标准 ... -
好用的jquery弹出框插件
2011-12-02 23:49 44101. jquery.ui.dialog 官方地址 http ... -
js 事件收集
2011-12-02 21:07 871一般事件 事件 浏览器支持 描述 onClick IE3|N ... -
js性能问题
2011-12-02 21:05 853随着web应用的复杂度日渐提高，JavaScript代码量也变 ... -
JS解决后台 繁体乱码 问题
2011-12-01 18:45 1462脚本处理文本框内容 var name_s= document ... -
js获取复选框的值、根据值查询数据库信息
2011-11-29 15:25 1489//js获取复选框的值 function zhuzhuangt ...
相关推荐
在“jquery操作表格隔行,滑动,点击,变色”这个主题中，我们将深入探讨如何使用jQuery来增强HTML表格的功能，包括隔行变色、滑动效果、点击响应以及多选框选中行的变色。 1. **隔行变色**：在HTML表格中，为了提高...
在本教程中，我们将探讨如何利用 jQuery 来实现表格的隔行变色、滑动变色以及点击变色功能。这些技巧能够使网页中的表格更加美观且交互性更强。 首先，我们要明白jQuery中的`$(document).ready()`函数，它表示当...
除此之外，本文还介绍了滑动变色的效果，即当鼠标移动到某一行上时，该行的背景颜色会改变；当鼠标离开时，颜色又恢复到原始状态。这同样是通过为表格行添加mouseover和mouseout事件来实现的，利用jQuery的addClass...
废话不多说了，直接给大家贴代码了，具体代码如下所示： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <html> <head> <!-- 引入的css压缩文件 -->...tabl
内容索引:脚本资源,jQuery,jquery排序,表格排序,... Demo1--隔行,滑动,点击 变色. Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色. Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色. Demo4--表格排序.
本篇文章将深入探讨“表格的应用”，重点关注隔行变色、滑动变色、点击变色以及多选框功能在表格中的实现和作用。 1. **隔行变色** 隔行变色是一种常见的视觉设计技巧，用于提高用户在浏览表格时的可读性和区分度...
JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...
list隔行变色.js long.js long2.js ls_socket.js lunar.js LZ动作.js main(1)(1).js main(1)(2).js main(1)(3).js main(1)(4).js main(1).js main(10).js Main(11).js main(12).js main(13).js main...
7. **表格样式处理**：利用`mouseover()`, `addClass()`, `mouseout()`, `removeClass()`, `click()`, 和 `toggleClass()`等方法实现表格行的隔行变色、鼠标滑过和点击时的样式变化。`tr:even`选择器用于选取偶数行...
在本课程作业“课工场作业-jq.zip”中，主要涵盖了五个JavaScript和jQuery相关的实践练习，旨在提升学员对网页动态效果和用户交互设计的能力。这些练习分别涉及到基础的HTML结构构建、CSS样式设计以及jQuery库的应用...
#### 一、隔行变色的表格实现 在Web开发中，为了提高用户体验，经常需要对表格进行美化处理，比如让表格的每一行隔行变色。这种方式不仅美观，还能帮助用户更容易地阅读和理解数据。 **原始JavaScript实现：** ``...
1)AjaxJavaScript资源 1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5....
5.2 滑动/131 5.2.1 slideDown()与slideUp方法/131 5.2.2 slideToggle()方法/134 5.3 淡入淡出/135 5.3.1 fadeIn()与fadeOut()方法/135 5.3.2 fadeTo()方法/137 5.4 自定义动画/139 5.4.1 简单的动画/140 ...