JS对表单的操作
JS对表单中的style的操作,包括复选框技术
废话不多说直接上文件代码!!!
功能:全选\反选,鼠标监测变颜色
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" width="900px" align="center">
<tr align="center" >
<th ><input type="checkbox" id="selAll"/>全选/全不选</th>
<th >序号</th>
<th >分类名称</th>
<th >分类描述</th>
<th >操作</th>
</tr>
<tr>
<td ><input type="checkbox" name="cname"/></td>
<td >1</td>
<td >手机数码</td>
<td >手机数码商品类</td>
<td ><a href="">修改 </a><a href=""> 删除</a>
</td>
</tr> <tr>
<td ><input type="checkbox" name="cname"/></td>
<td >2</td>
<td >手机数码</td>
<td >手机数码商品类</td>
<td ><a href="">修改 </a><a href=""> 删除</a>
</td> </tr> <tr>
<td ><input type="checkbox" name="cname"/></td>
<td >3</td>
<td >手机数码</td>
<td >手机数码商品类</td>
<td ><a href="">修改 </a><a href=""> 删除</a>
</td> </tr> <tr id>
<td ><input type="checkbox" name="cname"/></td>
<td >4</td>
<td >手机数码</td>
<td >手机数码商品类</td>
<td ><a href="">修改 </a><a href=""> 删除</a>
</td> </tr> <tr >
<td ><input type="checkbox" name="cname"/></td>
<td >5</td>
<td >手机数码</td>
<td >手机数码商品类</td>
<td ><a href="">修改 </a><a href=""> 删除</a>
</td> </tr> <tr >
<td ><input type="checkbox" name="cname"/></td>
<td >6</td>
<td >手机数码</td>
<td >手机数码商品类</td>
<td ><a href="">修改 </a><a href=""> 删除</a>
</td> </tr>
</table>
</body>
<script type="text/javascript">
var color = "";
/*加载所有页面*/
window.onload = function(){
var trs = document.getElementsByTagName("tr")
for(var i = 0; i < trs.length ; i++){
if(i % 2){
trs[i].style.backgroundColor = "darkgrey";
}
}
for(var i = 0; i < trs.length;i++){
trs[i].onmouseover = function(){
color = this.style.backgroundColor;
this.style.backgroundColor = "green";
/*trs[i].style.backgroundColor = "darkslateblue";*/
}
trs[i].onmouseout = function(){
this.style.backgroundColor = color;
}
} /*为selAll复选框绑定点击事件*/
var selAllObj = document.getElementById("selAll");
selAllObj.onclick = function() {
//判断selAll复选框选中状态
if(this.checked) {
//如果当前的复选框是处于不选中状态，获取到所有非selAll复选框，返回数组，遍历数组为数组中的每个复选框设置checked=true //通过各个表单组件的class属性的值来获取一组表单组件
//document.getElementsByClassName("");
//通过各个表单组件的name属性的值来获取一组表单组件
var checkboxes = document.getElementsByName("cname");
for(var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
} } else {
//如果当前的复选框是处于选中状态，获取到所有非selAll复选框，返回数组，遍历数组为数组中的每个复选框设置checked=false
var checkboxes = document.getElementsByName("cname");
for(var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
} } //为所有的name为cname的复选框绑定点击事件
var checkboxes = document.getElementsByName("cname");
//所有的name为cname的复选框个数
var allLength=checkboxes.length;
//存放选中的复选框个数
var length02=0;
for(var i=0;i<checkboxes.length;i++){
checkboxes[i].onclick=function(){
if(this.checked){
length02++;
}else{
length02--;
}
console.log(allLength);
console.log(length02);
if(allLength==length02){
document.getElementById("selAll").checked=true;
}else{
document.getElementById("selAll").checked=false;
}
}
}
}
</script>
</html>
效果图:
JS对表单的操作的更多相关文章
- JavaScript学习笔记——对表单的操作
javascript-对表单的操作实例讲解 <form name="myform" id="form1" action="" meth ...
- jQuery对表单的操作
表单应用 一个表单有3个基本组成部分: 表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法 表单域:包含文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上 ...
- js对表单设置了readonly和disabled后的区别
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: 1)Readonly只针对input(text / pa ...
- 5.1 《锋利的jQuery》jQuery对表单的操作
获取焦点和失去焦点改变样式 改变文本框/滚动条高度 复选框应用 下拉框应用 表单验证 tip1: 注意使用<label>的for标签,对应input的id.(for 属性规定 label ...
- ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作
ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- jQuery（6）——jQuery对表单、表格的操作及更多应用
jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...
- jQuery 对表单、表格的操作及更多应用-简略笔记
[jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...
- （十）jQuery对表单、表格的操作
一.表单应用 1.HTML中的表单大致由三部分组成 (1).表单标签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...
随机推荐
- c#线程中下载文件到本地
额,太懒了 直接上示例代码... /// <summary> /// 下载文件到本地 2017-05-31 /// </summary> /// <param name= ...
- Elasticsearch使用积累
常用插件 Head查看分片情况,操作简单api Bigdesk监控所在机器的CPU,IO,JVM等指标,简单分片概览 KOPF查看集群gc回收磁盘性能, 分片情况, 简单操作api, 感觉该插件较He ...
- SFTP 利用对称公钥免密码的方法
在客户端的操作: #cd .ssh 进入.ssh目录 #ssh-keygen -t rsa 执行创建密钥对命令 Generating public/private rsa ...
- 剑指offer--15.把字符串转换成整数
stringstream做这个真的很舒服 ------------------------------------------------------------------------------- ...
- 不带缓存IO和标准(带缓存)IO
linux对IO文件的操作分为: 不带缓存:open read.posix标准,在用户空间没有缓冲,在内核空间还是进行了缓存的.数据-----内核缓存区----磁盘 假设内核缓存区长度为100字节,你 ...
- itunesconnect如何提交被决绝过了的相同版本号
遇到一次审核被拒,打算再次提交时,不想改变版本号,可以在xcode里把build版本号后面几个.1,比如version上次被拒时是1.1.3,build也是1.1.3,这次送审时version不变,b ...
- oracle如何insert into 多个values
稍微熟悉Oracle的都知道,如果我们想一条SQL语句向表中插入多个值的话,如果如下语句 INSERT INTO 某表 VALUES(各个值),VALUES(各个值),.....; 这样会报错的,因为 ...
- Oracl使用总结二
1.ORA-00972: 标识符过长 错误排除 可能原因: 1.如果是拼接成的sql语句,请查找传递参数时字符型字段是否两边少了引号.2.数据库表名太长了,附各种类型的数据库表名长度: SQLSERV ...
- Azure CLI脚本查看未挂载的ManagedDisk
本文介绍如何用Azure CLI的脚本查看未挂载的Managed Disk,以及Managed Disk挂载到哪些资源. 具体的脚本如下: #!/bin/bash rm -rf noownerdisk ...
- Angular5学习笔记 - 创建组件（四）
一.创建组件 ng generate component component-name #简写 ng g c component-name ng generate directive|pipe|ser ...