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">&nbsp;</td>

  </tr>

  <tr>

    <td class="b">&nbsp;</td>

  </tr>

  <tr>

    <td class="c">&nbsp;</td>

  </tr>

  <tr>

    <td class="d">&nbsp;</td>

  </tr>

  <tr>

    <td class="e">&nbsp;</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 ...

随机推荐

C++程序员的javascript教程
本文主要目的是向c++程序员阐述javascript的编程思想,以及编程中的误区. 变量声明: 1.变量声明的解析早于代码运行.JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变 ...
Approaching the Fun Factor in Game Design
I recently did some research on this and talked to Dr. Clayton Lewis (computer Scientist in Residenc ...
【JavaScript】谈谈Google Polymer以及Web UI框架的未来
摘要:开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构,深得Polymer开发者的认同.他认为Polymer这样高互操作性的设计才应该是Web ...
Qt多线程学习：创建多线程
[为什么要用多线程?] 传统的图形用户界面应用程序都仅仅有一个运行线程,而且一次仅仅运行一个操作.假设用户从用户界面中调用一个比較耗时的操作,当该操作正在运行时,用户界面一般会冻结而不再响应.这个问题 ...
C和C++函数互相调用
Call C++ function from C & Call C function from C++ (C和C++函数互相调用) By williamxue on Jun 12, 2007 ...
C++对象模型（虽然在GCC下很大的不同，但是先收藏）
C++对象模型何为C++对象模型? 部分: 1. 语言中直接支持面向对象程序设计的部分 2. 对于各种支持的底层实现机制语言中直接支持面向对象程序设计的部分,如构造函数 ...
15+ tar command usages with examples – Unix/Linux--reference
reference :http://crybit.com/tar-command-usages-with-examples/ The ‘tar’ saves many files together i ...
【PHP代码审计】那些年我们一起挖掘SQL注入 - 8.全局防护盲点的总结下篇
0x01 背景现在的WEB应用对SQL注入的防护基本都是判断GPC是否开启,然后使用addlashes函数对单引号等特殊字符进行转义.但仅仅使用这样的防护是存在很多盲点的,接上篇http://www ...
iOS 开发调试技巧
对于软件开发而言,调试是必须学会的技能,重要性不言而喻.对于调试的技能,基本上是可以迁移的,也就是说你以前在其他平台上掌握的很多调试技巧,很多也是可以用在iOS开发中.不同语言.不同IDE.不同平台的 ...
Souerce 之图片格式
一.基本概念 1.矢量图与位图 1)矢量图-完美的几何图形矢量图是通过组成图形的一些基本元素,如点.线.面,边框,填充色等信息通过计算的方式来显示图形的.就好比我们在几何学里面描述一个圆可以通过它的 ...

JavaScript之表格过滤器

JavaScript之表格过滤器的更多相关文章

随机推荐

热门专题