<!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之表格过滤器的更多相关文章

  1. JavaScript创建表格的两种方式

    方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...

  2. Javascript合并表格相同内容单元格示例

    效果图: HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  3. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  4. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  5. day36—javascript对表格table的操作应用（一）

    转行学开发,代码100天——2018-04-21 今天记录一下,JavaScript对表格table的操作应用,包括表格元素的获取,创建,删除等. 一个普通的完整表格包括以下几个部分:table-&g ...

  6. 用JavaScript输出表格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. Javascript输出表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Javascript操作表格隔行变色

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. JavaScript之表格修改

    讲到表格,我们不免都了解它的属性及用途. colspan跨列(纵向的)和rowspan跨行(横向的). 表格中<tr></tr>标签标示行标签:<td></t ...

随机推荐

  1. 用iframe设置代理解决ajax跨域请求问题

    面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到aja ...

  2. 【好文翻译】测试必看：使用Spire.XLS来生成自动化报表！

    Download C# project - 7.1 KB 介绍  在我的编程博客中,我经常会比较不同算法或原理的性能特征.我常常会把性能日志(如花费时间)输出到控制台或者文本文件,然后复制到电子表格中 ...

  3. android编程之ExpandableListView使用总结

    ExpandableListView这个类与其他android列表形式视图是比较类似的,看源码的话,可以知道它是多种视图组合而成.今天不分析源码,只写些使用心得.   1.Button 对,没错,就是 ...

  4. C++进制转换（十进制转二进制、八进制、随意进制）

    十进制转二进制: //十进制转二进制 #include<iostream> using namespace std; void printbinary(const unsigned int ...

  5. PHP 自动生成导航网址的最佳方法 v20130826

    经常制作开发不同的网站的后台,写过很多种不同的后台导航写法. 最终积累了这种最写法,算是最好的吧.附上截图和代码如下(PHP+HTML) <?php $linkArr = array( 'ind ...

  6. Swift之UIBezierPath

    使用UIBezierPath可以创建基于矢量的路径.使用此类可以定义简单的形状,如椭圆.矩形或者有多个直线和曲线段组成的形状等.主要用到的该类的属性包括 moveToPoint: //设置起始点 ad ...

  7. WCF摘记

    //绑定形式 NetTcpBinding bind = new NetTcpBinding(); //地址 EndpointAddress address = new EndpointAddress( ...

  8. 关于Android WindowManager显示悬浮窗的动画效果

    要实现WindowManager添加的窗口,实现动画显示,就需要添加如下红色的属性,其他的添加View只要设置其Animations属性也会实现动画,当然自己实现也可,但是能直接用系统的已经实现好的, ...

  9. JSON使用——获取网页返回结果是Json的代码

    public String getWebData(String strUrl){ String json = null; try { URL url = new URL(strUrl); HttpUR ...

  10. 1.5.5 Tokenizers

    Tokenizers <fieldType name="text" class="solr.TextField"> <analyzer typ ...