DOM练习 选择框、表格添加、变色

多个选择框，三个按钮，显示：全选、反选、不选

html部分，建立五个多选框，三个按钮

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<button onClick="quan()">全选</button>//全选按钮
<button onClick="fan()">反选</button>//反选按钮
<button onClick="bu()">不选</button>//不选按钮

显示结果：

 

表单中的多选按钮：

<input type="checkbox"  checked> 内容

checked 属性是一个布尔属性，默认选中，默认返回值为true.，选中为true,不选中为false.

var inputdom = [];//多选框
window.onload = function () {
    inputdom = document.getElementsByTagName("input");//获取多选框
}
/*功能：全部选中*/
function quan() {
    for (var i = 0; i < inputdom.length; ++i) {
        inputdom[i].checked = true;
    }
}
/*功能：反向选择*/
function fan() {
    for (var i = 0; i < inputdom.length; ++i) {
        console.log(inputdom.length)
        if (inputdom[i].checked == true) {
            inputdom[i].checked = false;
        } else {
            inputdom[i].checked = true;
        }
    }
}
/*功能：全部不选*/
function bu() {
    for (var i = 0; i < inputdom.length; ++i) {
        inputdom[i].checked = false;
    }
}

 

2、表格添加行、删除行、隔行变色、移入变色

html中新建表头

姓名：<input id="mingzi" type="text" placeholder="必填">
年龄：<input id="age" type="text" placeholder="必填">
<button onClick="add()">添加一行</button>//添加按钮
<button onClick="color()">隔行变色</button>
<button onClick="yrbs()">移入变色</button>
<table width="1000" border="1">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
</table>

显示结果：

js中内容，建立三个方法，添加一行、隔行变色、移入变色

var tab=null;//获取表格
var tr_push=[];//添加行
var td_push=[];//添加单元格
var namedom=null;
var agedom=null;
window.onload = function () {
    tab=document.getElementsByTagName("table")[0];//获取表格
    tr=document.getElementsByTagName("tr");
    th=document.getElementsByTagName("th");
    namedom=document.getElementById("mingzi");
    agedom=document.getElementById("age");
}
/*功能：添加行*/
function add(){
     tr_push = document.createElement("tr");//创建<tr>标签
    for (var i = 0; i < th.length; ++i) {        
        if (i == 0) {
            td_push = document.createElement("td");
            td_push.innerHTML = tr.length;
//第一列的内容ID，排序，为tr的长度
        }
        if (i == 1) {
            td_push = document.createElement("td");
            td_push.innerHTML = namedom.value;
//第二列的内容姓名，为提取姓名框的内容
        }
        if (i == 2) {
            td_push = document.createElement("td");
            td_push.innerHTML = agedom.value;
//第二列的内容姓名，为提取年龄框的内容
        }
        if (i == 3) {
            td_push = document.createElement("td");
            td_push.innerHTML = "<button onClick='shan(this)'>删除</button>";
//将一个button标签作为i=3的内容
//点击时，调用方法删除
        }
        tr_push.appendChild(td_push);
    }
    tab.appendChild(tr_push);    
}
/*功能：删除行*/
function shan(obj) {
    obj.parentNode.parentNode.remove();
//移除button所在标签的父标签的父标签（tr）

}
/*功能：隔行变色*/
function color(){
    for(var i = 0; i < tr.length; i=i+2)
//隔行变色，所以    i=i+2
    tr[i].style.background = "red";    
//给tr添加样式background     
}
/*鼠标移入变色 移出变回原色*/
function yrbs(){
    for(var i =0;i<tr.length;i++){
            tr[i].setAttribute('onMouseOver','cl(this,"")');
//鼠标放上时，调用方法cl()
            tr[i].setAttribute('onMouseOut','cl(this,"out")');
//鼠标移开时，调用方法cl() ,加参数"out"
    }
}

function cl(obj,type){
//定义this=obj,实参type
    for(var i =0;i<tr.length;++i){
        tr[i].style.backgroundColor = "white";
//先把所有的定义为白色
    }
    if(type != "out"){
//当type不等于out时，该行变绿色
        obj.style.backgroundColor = "green";
    }
}