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. zookeeper基本概述

    zookeeper是一个分布式的协调服务框架 其本质是一个分布式的小文件存储系统,可以存储一些小的文件,官方建议每个小文件不要超过一兆 zk一般都是装奇数台,便于zk内部的一些投票选举 leader: ...

  2. [JZOJ 5129] 字符串

    题意:统计本质不同的串的个数. 思路: 显然后缀自动机,对于每个串建一个\(SAM\)统计即可. #include <bits/stdc++.h> using namespace std; ...

  3. iOS之NSArray数组排序

    一.数组遍历 除了常用的for和for-in遍历外,系统还提供了三种枚举遍历,对于大量的数据遍历可以使用下列三个方法. - (void)enumerateObjectsUsingBlock:(void ...

  4. [转]设置修改CentOS系统时区

    在我们使用CentOS系统的时候,也许时区经常会出现问题,有时候改完之后还是会出错,下面我们就来学习一种方法来改变这个状况.如果没有安装,而你使用的是 CentOS系统 那使用命令 yum insta ...

  5. 10.1 Nested vectored interrupt controller (NVIC) 嵌套矢量中断控制器

    特点 60个可屏蔽中断通道(不包含16个Cortex™-M3的中断线): 16个可编程的优先等级(使用了4位中断优先级): 低延迟的异常和中断处理: 电源管理控制: 系统控制寄存器的实现: 1. 中断 ...

  6. <读书笔记>如何入门爬虫？

    大部分爬虫框架都是 发送请求 获得页面 解析页面 下载内容 存储内容 定个宏伟目标 淘宝1000页 知乎 豆瓣 ... python基础 list.dict:序列化爬取的内容 切片:分割爬取内容,获取 ...

  7. HDU 5726 线段树+dp

    题意:给出一个序列,后q次询问,求给定区间gcd及整个序列有多少个序列的gcd和这个值相同 首先线段树维护区间gcd建树,之后预处理出每个gcd有多少个子序列,这时需要dp, dp[i][tmp]表示 ...

  8. selenium基础-图形验证码

    selenium基础-图形验证码 一.图形验证码作用 设计的初衷其实就是为了防自动化,防止一些人利用自动工具恶意攻击网站 二.图形验证码是由客户端生成还是由服务器端生成的? 图形验证码是由服务器端生成 ...

  9. capserjs-prototype(中)

    evaluateOrDie() 具体样式: evaluateOrDie(Function fn[, String message, int status]) Evaluates an expressi ...

  10. Spring Security 自定义登录页面

    SpringMVC + Spring Security,自定义登录页面登录验证 学习参考:http://www.mkyong.com/spring-security/spring-security-f ...