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>
效果图: