JavaScript之表格过滤器
<!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>表格过滤器</title>
<script language="javascript" src="../MyfirstjQueryFileWord/jquery-1.10.2.js">
</script>
<script language="javascript">
$(function(){
/*
//第一种方法
$('.a').css('background','#f00');
$('.b').css('background','#f0f');
$('.c').css('background','#00f');
$('.d').css('background','#ff0');
$('.e').css('background','#f0f');
*/
/*
//第二种方法
$('table tr:first').css('background-color','#f00');
$('table tr:last').css('background-color','#f00');
$('table tr:odd').css('background-color','#f00');
*/
$('table tr:even').css('background-color','#f00');
}); /* 当鼠标移到表格上是，当前一行背景变色 */
$(document).ready(function(){
$(".data_list tr td").mouseover(function(){
$(this).parent().find("td").css("background-color","#d5f4fe");
});
})
/* 当鼠标在表格上移动时，离开的那一行背景恢复 */
$(document).ready(function(){
$(".data_list tr td").mouseout(function(){
var bgc = $(this).parent().attr("bg");
$(this).parent().find("td").css("background-color",bgc);
});
}) </script>
</head>
<body>
<center>
<table width="500" border="1" height="500">
<tr>
<td class="a"> </td>
</tr>
<tr>
<td class="b"> </td>
</tr>
<tr>
<td class="c"> </td>
</tr>
<tr>
<td class="d"> </td>
</tr>
<tr>
<td class="e"> </td>
</tr>
</table>
</center>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格过滤器</title>
<script language="javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.10.2.js">
</script>
<script language="javascript">
$(function(){
/*
//第一种方法
$('.a').css('background','#f00');
$('.b').css('background','#f0f');
$('.c').css('background','#00f');
$('.d').css('background','#ff0');
$('.e').css('background','#f0f');
*/
/*
//第二种方法
$('table tr:first').css('background-color','#f00');
$('table tr:last').css('background-color','#f00');
$('table tr:odd').css('background-color','#f00');
*/
$('table tr:even').css('background-color','#f00');
});
/* 当鼠标移到表格上是，当前一行背景变色 */
$(document).ready(function(){
$(".data_list tr td").mouseover(function(){
$(this).parent().find("td").css("background-color","#d5f4fe");
});
})
/* 当鼠标在表格上移动时，离开的那一行背景恢复 */
$(document).ready(function(){
$(".data_list tr td").mouseout(function(){
var bgc = $(this).parent().attr("bg");
$(this).parent().find("td").css("background-color",bgc);
});
})
</script>
</head>
<body>
<center>
<table width="500" border="1" height="500">
<tr>
<td class="a"> </td>
</tr>
<tr>
<td class="b"> </td>
</tr>
<tr>
<td class="c"> </td>
</tr>
<tr>
<td class="d"> </td>
</tr>
<tr>
<td class="e"> </td>
</tr>
</table>
</center>
</body>
JavaScript之表格过滤器的更多相关文章
- JavaScript创建表格的两种方式
方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...
- Javascript合并表格相同内容单元格示例
效果图: HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- day36—javascript对表格table的操作应用（一）
转行学开发,代码100天——2018-04-21 今天记录一下,JavaScript对表格table的操作应用,包括表格元素的获取,创建,删除等. 一个普通的完整表格包括以下几个部分:table-&g ...
- 用JavaScript输出表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Javascript输出表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Javascript操作表格隔行变色
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JavaScript之表格修改
讲到表格,我们不免都了解它的属性及用途. colspan跨列(纵向的)和rowspan跨行(横向的). 表格中<tr></tr>标签标示行标签:<td></t ...
随机推荐
- CSDN问答频道“华章杯”7月排行榜活动开始，丰厚奖品等你拿
CSDN问答频道月度排行榜,是CSDN问答频道从3月开始举办的活动,旨在鼓励更多用户参与提问和解答,创造一个良好的互帮互助氛围,使参与者在问和答的过程中得到技术水平的提升,也希望大家能在技术交流中结交 ...
- hadoop分布式部署（2014-3-8）
hadoop简介: (维基百科)Apache Hadoop是一款支持數據密集型分佈式應用并以Apache 2.0許可協議發佈的開源軟體框架.它支持在商品硬件構建的大型集群上運行的應用程序.Hadoop ...
- 比较长的sql语句
SELECT o. * FROM hq_goods g LEFT JOIN hq_orders o ON o.goods_id = g.id WHERE o.user_id =73 AND o.sta ...
- [Angular 2] Move and Delete Angular 2 Components After Creation
After the original order is set, you can still leverage methods on the Angular 2 ViewContainer to re ...
- java课堂练习之可变參数与卫条件
/* 有人邀请A,B,C,D,E,F 6个人參加一项会议,这6个人有些奇怪.由于他们有非常多要求,已知: 1)A,B两人至少有1人參加会议: 2)A,E,F 3人中有2人參加会议. 3)B和C ...
- IPC——共享内存
Linux进程间通信——使用共享内存 下面将讲解进程间通信的另一种方式,使用共享内存. 一.什么是共享内存 顾名思义,共享内存就是允许两个不相关的进程访问同一个逻辑内存.共享内存是在两个正在运行的 ...
- cisco路由基于策略的路由选择
cisco路由基于策略的路由选择 基于策略的路由选择是一种手段,通过它管理员可以在基于目的地的路由选择协议中实现偏离标准路由的路由选择.基于目的地的路由选择协议将根据到一个目的地的最短路径选择路由,基 ...
- 分布式缓存技术redis学习（三）——redis高级应用（主从、事务与锁、持久化）
上文<详细讲解redis数据结构(内存模型)以及常用命令>介绍了redis的数据类型以及常用命令,本文我们来学习下redis的一些高级特性.目录如下: 安全性设置 设置客户端操作秘密 客户 ...
- EntityFramework优缺点(转)
Entity Framework 是微软推荐出.NET平台ORM开发组件, 现在已放源代码. 以下我们来讨论一下优缺点和一些问题, 以下简称EF. 有兴趣可查询官网的Entity Framewo ...
- URL请求过程
一.URL(Uniform Resource Locator)统一资源定位符,是可以从互联网上得到的资源的位置和访问方法的一种简洁表示,是互联网上标准资源的地址.互联网上的每一个文件都有一个唯一的UR ...