首页 > 代码库 > 锋利的Jquery(Table,Checkbox)
锋利的Jquery(Table,Checkbox)
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)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。