锋利的Jquery(Table,Checkbox)

浏览数：34 / 时间：2015年06月09日

1、Table奇数偶数行

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title></title>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <script type="text/javascript">
 7 window.onload = function(){ //页面所有元素加载完毕
 8     var item  =  document.getElementById("tb");            //获取id为tb的元素(table)
 9     var tbody =  item.getElementsByTagName("tbody")[0];    //获取表格的第一个tbody元素
10     var trs =   tbody.getElementsByTagName("tr");            //获取tbody元素下的所有tr元素
11     for(var i=0;i < trs.length;i++){//循环tr元素
12         if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
13             trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.
14         }
15     }
16 }
17 </script>
18 </head>
19 <body>
20 <table id="tb">
21     <tbody>
22         <tr><td>第一行</td><td>第一行</td></tr>
23         <tr><td>第二行</td><td>第二行</td></tr>
24         <tr><td>第三行</td><td>第三行</td></tr>
25         <tr><td>第四行</td><td>第四行</td></tr>
26         <tr><td>第五行</td><td>第五行</td></tr>
27         <tr><td>第六行</td><td>第六行</td></tr>
28     </tbody>
29 </table>
30 </body>
31 </html>

2、CheckBox

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title></title>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <script type="text/javascript">
 7 window.onload = function(){//页面所有元素加载完毕
 8     var btn = document.getElementById("btn");  //获取id为btn的元素(button)
 9     btn.onclick = function(){                   //给元素添加onclick事件
10         var arrays = new Array();              //创建一个数组对象
11         var items = document.getElementsByName("check");  //获取name为check的一组元素(checkbox)
12         for(i=0; i < items.length; i++){  //循环这组数据
13             if(items[i].checked){      //判断是否选中
14                 arrays.push(items[i].value);  //把符合条件的 添加到数组中. push()是javascript数组中的方法.
15             }
16         }
17         alert( "选中的个数为："+arrays.length  );
18     }
19 }
20 </script>
21 </head>
22 <body>
23 <form method="post" action="#">
24     <input type="checkbox" value="1" name="check" checked="checked"/>
25     <input type="checkbox" value="2" name="check" />
26     <input type="checkbox" value="3" name="check" checked="checked"/>
27     <input type="button" value="你选中的个数" id="btn"/>
28 </form>
29 </body>
30 </html>