1、Table奇数偶数行

 <!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>

 <title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <script type="text/javascript">

 window.onload = function(){ //页面所有元素加载完毕

     var item  =  document.getElementById("tb");            //获取id为tb的元素(table)

     var tbody =  item.getElementsByTagName("tbody")[];    //获取表格的第一个tbody元素

     var trs =   tbody.getElementsByTagName("tr");            //获取tbody元素下的所有tr元素

     for(var i=;i < trs.length;i++){//循环tr元素

         if(i%==){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)

             trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.

         }

     }

 }

 </script>

 </head>

 <body>

 <table id="tb">

     <tbody>

         <tr><td>第一行</td><td>第一行</td></tr>

         <tr><td>第二行</td><td>第二行</td></tr>

         <tr><td>第三行</td><td>第三行</td></tr>

         <tr><td>第四行</td><td>第四行</td></tr>

         <tr><td>第五行</td><td>第五行</td></tr>

         <tr><td>第六行</td><td>第六行</td></tr>

     </tbody>

 </table>

 </body>

 </html>

2、CheckBox

 <!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>

 <title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <script type="text/javascript">

 window.onload = function(){//页面所有元素加载完毕

     var btn = document.getElementById("btn");  //获取id为btn的元素(button)

     btn.onclick = function(){                   //给元素添加onclick事件

         var arrays = new Array();              //创建一个数组对象

         var items = document.getElementsByName("check");  //获取name为check的一组元素(checkbox)

         for(i=; i < items.length; i++){  //循环这组数据

             if(items[i].checked){      //判断是否选中

                 arrays.push(items[i].value);  //把符合条件的 添加到数组中. push()是javascript数组中的方法.

             }

         }

         alert( "选中的个数为："+arrays.length  );

     }

 }

 </script>

 </head>

 <body>

 <form method="post" action="#">

     <input type="checkbox" value="" name="check" checked="checked"/>

     <input type="checkbox" value="" name="check" />

     <input type="checkbox" value="" name="check" checked="checked"/>

     <input type="button" value="你选中的个数" id="btn"/>

 </form>

 </body>

 </html>

锋利的Jquery(Table,Checkbox)的更多相关文章

  1. 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器

    <锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...

  2. 锋利的jQuery学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  3. 锋利的jQuery读书笔记---选择器

    前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...

  4. Jquery实现checkbox按shift多选

    html <html> <head> <meta http-equiv="content-type" content="text/html; ...

  5. Jquery 组 checkbox双向控制与tr变色

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  6. 锋利的jQuery（第二版）学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...

  7. Jquery全选系列操作（锋利的jQuery）

    Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  8. 《锋利的jQuery》读书笔记（DOM+事件）

    前阵子买了一批书,就从锋利的jQuery看起吧,书中一些太过常规以及没有强记必要性的操作就不记录了. 1.DOM加载后执行JS $(document).ready(function(){ //.... ...

  9. 5.2 《锋利的jQuery》jQuery对表格的操作（选项卡/换肤）

    表格隔行变色以及单选/复选 表格展开关闭 表格筛选 字体变大/缩小 选项卡 网页换肤 tip1: $("tr:odd")和$("tr:even")选择器索引是从 ...

随机推荐

  1. Notepad++如何对比文件 Notepad++对比两个文件代码方法

    大家在使用Notepad++的时候,需要对编辑的两个文件进行比较,找出两个文件代码的区别,快速进行编辑修改,那么Notepad++如何对比文件,下面小编就给大家带来Notepad++对比两个文件代码方 ...

  2. P1624 单词缩写

    P1624 单词缩写 题目描述 树树发现好多计算机中的单词都是缩写,如GDB是全称Gnu DeBug的缩写.但是,有时候缩写对应的全称会不固定,如缩写LINUX可以理解为: (1) LINus’s U ...

  3. Centos搭建http代理服务器(无密码验证)

    一.安装shadowsocks yum install python-setuptools && easy_install pip pip install shadowsocks 二. ...

  4. ncurses库的介绍与安装

    Frm: http://blog.csdn.net/Mary_Jane/article/details/50769631 介绍 ncurses(new curses)是一套编程库,它提供了一系列的函数 ...

  5. i++ 和 ++i 的区别

    先说运算规则吧. i++ 是先赋值后自增:++i 是先自增后赋值. 以下是代码示例: int a=0; int b=0; int i=0; a=i++; System.out.println(&quo ...

  6. 【HDUOJ】1213 How many tables

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1213 题意:Ignatius邀请了n个朋友来家里,朋友之间如果互相不认识的不想坐一起,所以至少要准备几 ...

  7. POJ1149_PIGS(网络流/EK)

    PIGS Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 15721   Accepted: 7021 Description ...

  8. 转Git仓库分支(Branch)和标签(Tag)

    仓库的分支(Branch)规范,影响到每个团队的工作流的一致性:标签(Tag)便于开发团队.测 试团队和其他团队识别每个项目的版本,特别是在协同处理线上问题的时候,大家可以非常清楚 地知道线上运行版本 ...

  9. C++中的指针（*）、引用（&）、const详解（一、定义变量）

    一.前言 本人作为一个工作了5年的程序员,程序生涯最初是从c/c++开始的,但是始终不能很熟悉的理解c语言中的指针和c++中的引用,归其原因,一部分自己没有静下心来思考,一部分原因是其自身的复杂性. ...

  10. 【模板篇】A* 寻路算法

    上次在做k短路的时候说到了A*, 但是并没有仔细的研究A*寻路, 毕竟k短路中的A*也不怎么标准… A*寻路的过程网上还是有很多的, 讲得也很清楚, 不妨跟着里面的图示自己动手操作一下, 基本一遍就能 ...