JS 小demo之个人信息添加实例代码分享

以下是简易效果：

文档标题>





;
男选项>
女选项>


标题>








操作

		;id	姓名	年龄	性别
删除选中

(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 = ' ' nub ' ' formContrl[0 ].value ' ' formContrl[1].value ' ' formContrl[2].value ' ↑ ↓X ';

/* 绑定事件 */
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 if(!checks[i].checked){
return false;
}
}
return true;
}
})();

以上是JS 小demo之个人信息添加实例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！