每天一個JS 小demo之個人信息添加。主要知識點：DOM操作中的表格操作，節點操作
以下是簡易效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table {
width: 555px;
text-align: center;
}
table a {
text-decoration: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var formElements = document.querySelector(‘form‘);
var inputElements = document.querySelectorAll(‘input‘);
var tableElements = document.querySelector(‘table‘);
var tbodyElements = tableElements.querySelector(‘tbody‘);
var selectElements = document.querySelector(‘div select‘);
var checkAll = document.querySelector(‘thead input‘);
var delAll = document.querySelector(‘thead a‘);
var nub = 0;
inputElements[2].onclick = function(){
for(var i = 0; i < 2; i++){
if(inputElements[i].value==""||selectElements.value==""){
alert(‘請輸入完整信息‘);
inputElements[i].focus();
return;
}
}
var trElements = document.createElement(‘tr‘);
trElements.innerHTML = ‘<td><input type="checkbox"></td><td>‘+(nub+1)+‘</td><td>‘+inputElements[0].value+‘</td><td>‘+inputElements[1].value+‘</td><td>‘+selectElements.value+‘</td><td><a href="javascript:;">上移</a> <a href="javascript:;">下移</a> <a href="javascript:;">刪除</a></td>‘;
var aElements = trElements.querySelectorAll(‘a‘);
aElements[0].onclick = function(){
if(trElements.previousElementSibling){
tbodyElements.insertBefore(trElements,trElements.previousElementSibling);
} else{
alert("這已經是第一個了");
}
};
aElements[1].onclick = function(){
if(trElements.nextElementSibling){
tbodyElements.insertBefore(trElements.nextElementSibling,trElements);
} else{
alert("這已經是最後一個了");
}
};
aElements[2].onclick = function(){
tbodyElements.removeChild(trElements);
tellCheckAll();
};
tbodyElements.appendChild(trElements);
checkAll.checked = false;
for(var i = 0; i < 2; i++){
inputElements[i].value = "";
}
selectElements.value = "";
nub++;
var checkboxElements = tbodyElements.getElementsByTagName(‘input‘);
checkAll.onchange = function(){
for(var i = 0; i < checkboxElements.length; i++){
checkboxElements[i].checked = this.checked;
}
};
delAll.onclick = function(){
for(var i = 0; i < checkboxElements.length; i++){
if(checkboxElements[i].checked){
tbodyElements.removeChild(checkboxElements[i].parentNode.parentNode);
i--;
}
}
checkAll.checked = false;
};
for(var i = 0; i < checkboxElements.length; i++){
checkboxElements[i].onchange = function(){
tellCheckAll();
};
}
function tellCheckAll(){
var isCheck = true;
for(var i = 0; i < checkboxElements.length; i++){
if(!checkboxElements[i].checked){
isCheck = false;
break;
}
}
checkAll.checked = isCheck;
};
};
};
</script>
</head>
<body>
<form>
<div>
<label for="">姓名<input type="text"></label>
<label for="">年齡<input type="text"></label>
<label for="">性別
<select id="">
<option value=""></option>
<option value="女">女</option>
<option value="男">男</option>
<option value="保密">保密</option>
</select>
</label>
<input type="button" value="添加">
</div>
<table border="1">
<thead>
<tr>
<th>
<input type="checkbox">
<a href="javascript:;">刪除所選</a>
</th>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
</body>
</html>
每天一個JS 小demo之個人信息添加。主要知識點：DOM操作中的表格操作，節點操作