以下是简易效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<header>
<input type="text" value="zmouse" placeholder="名字">
<input type="text" value="33" placeholder="年龄">
<select>
<option>男</option>
<option>女</option>
</select>
<input type="button" value="提交">
</header>
<table width="500" border="1">
<thead>
<tr>
<th></th>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="6"><input type="checkbox"><a href="javascript:;">删除选中</a></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
(function(){
var formcontrl = document.queryselectorall('header>*');
var table = document.queryselector('table');
var tbody = table.tbodies[0];
var tfootchild = table.tfoot.rows[0].cells[0].children;
var nub = 0;
formcontrl[formcontrl.length-1].onclick = function(){
/* 判断输入 内容 略 */
/* 生成元素 */
nub++;
var tr = document.createelement(tr);
tr.innerhtml = '<th><input type="checkbox" name=""></th><th>'+nub+'</th><th>'+formcontrl[0].value+'</th><th>'+formcontrl[1].value+'</th><th>'+formcontrl[2].value+'</th><th><a href="javascript:;">↑</a> <a href="javascript:;">↓</a> <a href="javascript:;">x</a></th>';
/* 绑定事件 */
var a = tr.queryselectorall('a');
var check = tr.queryselector('input');
/*选中单个时候，操作整体书否全选 */
check.onchange = setcheckall;
tfootchild[0].checked = false;
/* 上移 */
a[0].onclick = function(){
if(tr.previouselementsibling){
tbody.insertbefore(tr,tr.previouselementsibling);
} else {
//alert(已经是第一个了);
tbody.appendchild(tr);
}
};
/* 下移 */
a[1].onclick = function(){
if(tr.nextelementsibling){
tbody.insertbefore(tr.nextelementsibling,tr);
} else {
//alert(已经是第一个了);
tbody.insertbefore(tr,tbody.rows[0]);
}
};
/*删除 */
a[2].onclick = function(){
tbody.removechild(tr);
setcheckall();
};
/* 插入元素 */
tbody.appendchild(tr);
};
tfootchild[0].onchange = function(){
/*操作 所有复选框的全选和全不选*/
var checks = tbody.queryselectorall('input');
var _this = this;
checks.foreach(function(value){
value.checked = _this.checked;
});
};
/*删除选中 */
tfootchild[1].onclick = function(){
/*操作 所有复选框的全选和全不选*/
var checks = tbody.queryselectorall('input');
var _this = this;
checks.foreach(function(value){
if(value.checked){
tbody.removechild(value.parentnode.parentnode);
}
});
};
/*设置全选*/
function setcheckall(){
tfootchild[0].checked = getcheckall();
}
/* 获取这一组的check是否全部选中 */
function getcheckall(){
var checks = tbody.queryselectorall('input');
for(var i = 0; i < checks.length;i++){
if(!checks[i].checked){
return false;
}
}
return true;
}
})();
</script>
</body>
</html>
以上就是js 小demo之个人信息添加实例代码分享的详细内容。