JS 小demo之個人資訊加入實例代碼分享
- 零下一度原創
- 2017-06-26 09:48:031486瀏覽
以下是簡單效果：
<元字符集=“UTF-8”>
<標題>文檔
<正文>
<標題>
xfd2>
(function(){
var formContrl = document.querySelectorAll('header>*');
var table = document.querySelector('table');
var tBody = table.tBodies[0];
# var tFootChildld = table.tFoot.rows[0].cells[0].children;
var nub = 0;
formContrl[formContrl.length- 1].onclick = function(){
/* 判斷輸入內容略*/
/* 產生元素*/
nub++;
var tr = document.createElement("tr");
tr.innerHTML = '
/* 綁定事件*/
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 ;
}
})();