动态表格&全选

效果展示

PostForm.html

学生信息表

	编号	姓名	性别	操作
	1	哈哈哈	男	删除
	2	嘿嘿嘿	男	删除
	3	小红红	女	删除
	4	小伙子	女	删除

</ html>

PostForm.css

body {
background: url("../image/2.png") no-repeat center;
/设置图片适应整个页面/
background-size: 100% 100%;
background-attachment:fixed;
}

table{
border: 1px solid;
margin: auto;
width: 500px;
color: #CC00FF;
}

td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
margin-top: 30px;

}

PostForm.js

//在页面加载完成后绑定事件
window.onload = function () {
//给全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function (ev) {

//全选
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为选中 checked = true
cbs[i].checked = true;
}
}

document.getElementById("unSelectAll").onclick = function (ev) {
//全不选
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为不选中 checked = false
cbs[i].checked = false;
}
}

document.getElementById("selectRev").onclick = function (ev) {
//反选
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态
cbs[i].checked = !cbs[i].checked;
}
}

document.getElementById("firstcb").onclick = function () {
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态和第一个cb的状态相同
cbs[i].checked = this.checked;
}
}
}

//使用innerHTML添加
document.getElementById("btn_add").onclick = function () {
//获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;

//获取table
var table = document.getElementsByTagName("table")[0];

//追加一行
table.innerHTML += "\n" +
" \n" +
" " + id + "\n" +
" " + name + "\n" +
" " + gender + "\n" +
" <a href="javascript:void(0);" onclick="del(this);" >删除\n" +
" ";
}

//删除方法
function del(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);

}