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

<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>//不选按钮

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;
}
}

姓名：<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>

var tab=null;//获取表格
var tr_push=[];//添加行
var td_push=[];//添加单元格
var namedom=null;
var agedom=null;
window.onload = function () {
tab=document.getElementsByTagName("table")[];//获取表格
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 = ; i < th.length; ++i) {
if (i == ) {
td_push = document.createElement("td");
td_push.innerHTML = tr.length;
//第一列的内容ID，排序，为tr的长度
}
if (i == ) {
td_push = document.createElement("td");
td_push.innerHTML = namedom.value;
//第二列的内容姓名，为提取姓名框的内容
}
if (i == ) {
td_push = document.createElement("td");
td_push.innerHTML = agedom.value;
//第二列的内容姓名，为提取年龄框的内容
}
if (i == ) {
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 = ; i < tr.length; i=i+)
//隔行变色，所以 i=i+2
tr[i].style.background = "red";
//给tr添加样式background
}
/*鼠标移入变色 移出变回原色*/
function yrbs(){
for(var i =;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 =;i<tr.length;++i){
tr[i].style.backgroundColor = "white";
//先把所有的定义为白色
}
if(type != "out"){
//当type不等于out时，该行变绿色
obj.style.backgroundColor = "green";
}
}