首页 > 代码库 > 锋利的Jquery(Table,Checkbox)

锋利的Jquery(Table,Checkbox)

2024-07-19 20:20:50   219人阅读

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=http://www.mamicode.com/"1" name="check" checked="checked"/>25     <input type="checkbox" value=http://www.mamicode.com/"2" name="check" />26     <input type="checkbox" value=http://www.mamicode.com/"3" name="check" checked="checked"/>27     <input type="button" value=http://www.mamicode.com/"你选中的个数" id="btn"/>28 </form>29 </body>30 </html>

 

锋利的Jquery(Table,Checkbox)


联系
我们