JS对表单中的style的操作,包括复选框技术

废话不多说直接上文件代码!!!

功能:全选\反选,鼠标监测变颜色

  1. <html>
  2. <head>
  3. <meta charset="utf-8" />
  4. <title></title>
  5. </head>
  6. <body>
  7. <table border="1" width="900px" align="center">
  8. <tr align="center" >
  9. <th ><input type="checkbox" id="selAll"/>全选/全不选</th>
  10. <th >序号</th>
  11. <th >分类名称</th>
  12. <th >分类描述</th>
  13. <th >操作</th>
  14. </tr>
  15. <tr>
  16. <td ><input type="checkbox" name="cname"/></td>
  17. <td >1</td>
  18. <td >手机数码</td>
  19. <td >手机数码商品类</td>
  20. <td ><a href="">修改 </a><a href=""> 删除</a>
  21. </td>
  22. </tr>
  23.  
  24. <tr>
  25. <td ><input type="checkbox" name="cname"/></td>
  26. <td >2</td>
  27. <td >手机数码</td>
  28. <td >手机数码商品类</td>
  29. <td ><a href="">修改 </a><a href=""> 删除</a>
  30. </td>
  31.  
  32. </tr>
  33.  
  34. <tr>
  35. <td ><input type="checkbox" name="cname"/></td>
  36. <td >3</td>
  37. <td >手机数码</td>
  38. <td >手机数码商品类</td>
  39. <td ><a href="">修改 </a><a href=""> 删除</a>
  40. </td>
  41.  
  42. </tr>
  43.  
  44. <tr id>
  45. <td ><input type="checkbox" name="cname"/></td>
  46. <td >4</td>
  47. <td >手机数码</td>
  48. <td >手机数码商品类</td>
  49. <td ><a href="">修改 </a><a href=""> 删除</a>
  50. </td>
  51.  
  52. </tr>
  53.  
  54. <tr >
  55. <td ><input type="checkbox" name="cname"/></td>
  56. <td >5</td>
  57. <td >手机数码</td>
  58. <td >手机数码商品类</td>
  59. <td ><a href="">修改 </a><a href=""> 删除</a>
  60. </td>
  61.  
  62. </tr>
  63.  
  64. <tr >
  65. <td ><input type="checkbox" name="cname"/></td>
  66. <td >6</td>
  67. <td >手机数码</td>
  68. <td >手机数码商品类</td>
  69. <td ><a href="">修改 </a><a href=""> 删除</a>
  70. </td>
  71.  
  72. </tr>
  73. </table>
  74. </body>
  75. <script type="text/javascript">
  76. var color = "";
  77. /*加载所有页面*/
  78. window.onload = function(){
  79. var trs = document.getElementsByTagName("tr")
  80. for(var i = 0; i < trs.length ; i++){
  81. if(i % 2){
  82. trs[i].style.backgroundColor = "darkgrey";
  83. }
  84. }
  85. for(var i = 0; i < trs.length;i++){
  86. trs[i].onmouseover = function(){
  87. color = this.style.backgroundColor;
  88. this.style.backgroundColor = "green";
  89. /*trs[i].style.backgroundColor = "darkslateblue";*/
  90. }
  91. trs[i].onmouseout = function(){
  92. this.style.backgroundColor = color;
  93. }
  94. }
  95.  
  96. /*为selAll复选框绑定点击事件*/
  97. var selAllObj = document.getElementById("selAll");
  98. selAllObj.onclick = function() {
  99. //判断selAll复选框选中状态
  100. if(this.checked) {
  101. //如果当前的复选框是处于不选中状态,获取到所有非selAll复选框,返回数组,遍历数组为数组中的每个复选框设置checked=true
  102.  
  103. //通过各个表单组件的class属性的值来获取一组表单组件
  104. //document.getElementsByClassName("");
  105. //通过各个表单组件的name属性的值来获取一组表单组件
  106. var checkboxes = document.getElementsByName("cname");
  107. for(var i = 0; i < checkboxes.length; i++) {
  108. checkboxes[i].checked = true;
  109. }
  110.  
  111. } else {
  112. //如果当前的复选框是处于选中状态,获取到所有非selAll复选框,返回数组,遍历数组为数组中的每个复选框设置checked=false
  113. var checkboxes = document.getElementsByName("cname");
  114. for(var i = 0; i < checkboxes.length; i++) {
  115. checkboxes[i].checked = false;
  116. }
  117. }
  118.  
  119. }
  120.  
  121. //为所有的name为cname的复选框绑定点击事件
  122. var checkboxes = document.getElementsByName("cname");
  123. //所有的name为cname的复选框个数
  124. var allLength=checkboxes.length;
  125. //存放选中的复选框个数
  126. var length02=0;
  127. for(var i=0;i<checkboxes.length;i++){
  128. checkboxes[i].onclick=function(){
  129. if(this.checked){
  130. length02++;
  131. }else{
  132. length02--;
  133. }
  134. console.log(allLength);
  135. console.log(length02);
  136. if(allLength==length02){
  137. document.getElementById("selAll").checked=true;
  138. }else{
  139. document.getElementById("selAll").checked=false;
  140. }
  141. }
  142. }
  143. }
  144. </script>
  145. </html>

效果图:

JS对表单的操作的更多相关文章

  1. JavaScript学习笔记——对表单的操作

    javascript-对表单的操作实例讲解 <form name="myform" id="form1" action="" meth ...

  2. jQuery对表单的操作

    表单应用 一个表单有3个基本组成部分: 表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法 表单域:包含文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上 ...

  3. js对表单设置了readonly和disabled后的区别

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: 1)Readonly只针对input(text / pa ...

  4. 5.1 《锋利的jQuery》jQuery对表单的操作

    获取焦点和失去焦点改变样式 改变文本框/滚动条高度 复选框应用 下拉框应用 表单验证 tip1: 注意使用<label>的for标签,对应input的id.(for 属性规定 label ...

  5. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

  6. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  7. jQuery(6)——jQuery对表单、表格的操作及更多应用

    jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...

  8. jQuery 对表单、表格的操作及更多应用-简略笔记

    [jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...

  9. (十)jQuery对表单、表格的操作

    一.表单应用 1.HTML中的表单大致由三部分组成 (1).表单标签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

随机推荐

  1. Java企业微信开发_15_查询企业微信域名对应的所有ip

    一.前言 二.方法 1.在线网站 百度搜索"域名查IP",可查到如下网站,输入域名即可查到所有IP: 站长工具 site.ip138.com tools.ipip.net 2.li ...

  2. boost开发指南

    C++确实很复杂,神一样的0x不知道能否使C++变得纯粹和干爽? boost很复杂,感觉某些地方有过度设计和太过于就事论事的嫌疑,对实际开发工作的考虑太过于理想化.学习boost本身就是一个复杂度,有 ...

  3. Java 利用Gson将json字符串转换为List<Map<String, String>>

    json字符串类似于: [ { "userPhone": "123", "userNo": "123-2", " ...

  4. GC(Garbage Collection)垃圾回收机制

    1.在垃圾回收器中,程序员没有执行权,只有通知它的权利. 2.程序员可以通过System.gc().通知GC运行,但是Java规范并不能保证立刻运行. 3.finalize()方法,是java提供给程 ...

  5. 转载 VC轻松解析XML文件 - CMarkup类的使用方法

    VC轻松解析XML文件 - CMarkup类的使用方法http://www.cctry.com/thread-3866-1-1.html VC解析XML文件的工具有很多,CMarkup, tinyXM ...

  6. sass和less、stylus语法(2)

    6.运算符(Operations)CSS预处理器语言还具有运算的特性,其简单的讲,就是对数值型的Value(如:数字.颜色.变量等)进行加减乘除四则运算.这样的特性在CSS样式中是想都不敢想的,但在C ...

  7. spring 学习二 @RequestMapping

    RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. RequestMapping注解有六个属性,下面我们把她 ...

  8. md5加密(1)

    package com.js.ai.modules.pointwall.util; import java.security.MessageDigest; import java.security.N ...

  9. “百度杯”CTF比赛 十一月场(Misc)

    签到题: 题目提示: 文件在i春秋的ctf2群里,加群下载文件 下载下来之后发现有压缩密码 题目提示有提示解压密码:key:ichunqiumemeda 打开文件,得到flag 签到题2: 点击下载附 ...

  10. HtmlHelper(辅助产生HTML之用)

    弱类型: 1.使用HTML辅助方法输出超链接 (1)在View中输出ASP.NET MVC的超链接通常会用Html.ActionLink辅助方法,该方法用于产生文字链接,其文字部分会自动进行HTML编 ...