添加表单元素
html
<div id="form">
请输入姓名: <input type="text" id="name"> <br>
请输入性别: <input type="radio" id="sex" name="sex" checked>男
<input type="radio" name="sex">女<br>
请输入年龄: <input type="text" id="age">
<button>添加到表格</button>
</div>
<table id="tab">
<thead>
<tr>
<th width="20%"><input type="checkbox" id="all">全选</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>女</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>女</td>
<td>1</td>
</tr>
</tbody>
</table>
<div id="div1">
<button>删除所选行</button>
</div>
css
#form{width: 480px;margin: 30px auto;border: 1px solid #eee;border-radius: 5px;padding: 10px;line-height: 30px;position: relative;}
button{position: absolute;right: 10px;bottom: 10px;}
#tab{width: 500px;margin: 30px auto;border-collapse: collapse;}
th,td{border: 1px solid #000;padding: 5px;}
tbody tr td:first-child{text-align: center;}
/*input[type] 属性选择器 选择input标签，并且有type属性input标签*/
/*input[type = "checkbox"] 选择有type属性并且值为checkbox的input标签*/
input[type="checkbox"]{width: 15px;height: 15px;}
#div1{position: relative;width: 480px;padding: 10px;margin: 0 auto;}
js
var oInput = document.getElementById("form").getElementsByTagName("input");
var oBut = document.getElementsByTagName("button");
var oTable = document.getElementsByTagName("table")[0];
var tBodies = oTable.tBodies[0];
var allBut = document.getElementById("all");
//2.点击添加到表格，获取输入框中的内容，在表格中添加一行
oBut[0].onclick = function () {
//1.创建行
var tr = document.createElement("tr");
//3.添加单元格
tr.appendChild(createNode("td","<input type='checkbox' />"));
tr.appendChild(createNode("td", oInput[0].value));
tr.appendChild(createNode("td",oInput[1].checked == true?"男":"女"));
tr.appendChild(createNode("td", oInput[3].value));
//2.添加行到表格
tBodies.appendChild(tr);
checkAll();
}
function createNode(element,text) {
var td = document.createElement(element);
td.innerHTML = text;
return td;
}
//3.删除
oBut[1].onclick = function () {
for(var i = 0;i<tBodies.rows.length;i++){
var oIn = tBodies.rows[i].getElementsByTagName("input")[0];
if(oIn.checked == true){ //是选中
tBodies.rows[i].remove();
i--;
}
}
}
//4.点击全选按钮，全选下面所有的input
allBut.onclick = function () {
var oI = tBodies.getElementsByTagName("input");
console.log(oI);
for(var i = 0;i<oI.length;i++){
oI[i].checked = allBut.checked;
}
}
//5.全部选中input时，全选
checkAll();//一开始就应该初始化
function checkAll () {
var oI = tBodies.getElementsByTagName("input");
for(var i = 0;i<oI.length;i++){
oI[i].onclick = function () {
//假设全选了，然后去循环验证假设是否成立，
//如果有任何一个input没有被选中，假设不成立，则为false
var tr = true; //假设
for(var j = 0;j<oI.length;j++){
if(oI[j].checked == false){
tr = false;
break;
}
}
allBut.checked = tr;
}
}
}
}
效果图
