JS小demo之个人信息添加实例代码分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS小demo之个人信息添加实例代码分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3064字，纯文字阅读大概需要5分钟。
内容图文
以下是简易效果：
<!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>
<!-- <tr><th><input type="checkbox" name=""></th><th>1</th><th>zMouse</th><th>18</th><th>男</th><th><a href="javascript:;">↑</a> <a href="javascript:;">↓</a> <a href="javascript:;">X</a></th></tr> -->
</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之个人信息添加实例代码分享的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的JS小demo之个人信息添加实例代码分享全部内容，希望文章能够帮你解决JS小demo之个人信息添加实例代码分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。