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. NX二次开发-UFUN询问注释对象的数据UF_DRF_ask_ann_data

    NX11+VS2013 #include <uf.h> #include <uf_ui.h> #include <uf_drf.h> UF_initialize() ...

  2. NX二次开发-常用lib库文件

    在项目属性->配置属性->链接器->输入->附加依赖项: libufun.lib UFUNC API 函数库 libugopenint.lib UFUNC 对话框 API 函数 ...

  3. NX二次开发-NXOPEN创建工程图表格Annotations::TableSectionBuilder *tableSectionBuilder1;

    NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...

  4. C语言-实例3个数由小到大排序

    VS2012 //C语言实例 3个数由小到大排序 #include <stdio.h> void main() { int a, b, c, t; printf("Please ...

  5. （转）实现这两个接口ModelDriven<T>,Preparable有什么用？

    转:http://www.cnblogs.com/guanghuiqq/archive/2012/08/24/2654300.html 实现了ModelDriven就必须实现getModel这个方法, ...

  6. Python 爬虫-抓取小说《盗墓笔记-怒海潜沙》

    最近想看盗墓笔记,看了一下网页代码,竟然不是js防爬虫,那就用简单的代码爬下了一节: """ 爬取盗墓笔记小说-七星鲁王宫 """ from ...

  7. jdk源码阅读

    转载https://www.cnblogs.com/mh-study/p/10078548.html 1.java.lang 1) Object 12) String 13) AbstractStri ...

  8. jwt、oauth2和oidc等认证授权技术的理解

    前言 jwt.oauth2.oidc等,都是和认证授权相关的规范或者解决方案,因此要理解他们,就需要从业务场景的适用性一步步的分析和认识. 一.认证授权业务场景理解 就个人目前的理解来看,一个好的软件 ...

  9. redhat7和redhat6混合搭建文档

    1.下载cm对应redhat7的版本.2.修改/opt/cloudera/cm-5.10.0/etc/cloudera-scm-agent/config.ini成为中心机器hostname/ip(ma ...

  10. Spark RDD API（scala）

    1.RDD RDD(Resilient Distributed Dataset弹性分布式数据集)是Spark中抽象的数据结构类型,任何数据在Spark中都被表示为RDD.从编程的角度来看,RDD可以简 ...