每天一个JS 小demo之个人信息添加。主要知识点：DOM操作中的表格操作，节点操作...

最新推荐文章于 2023-11-16 13:56:07 发布

weixin_30346033

最新推荐文章于 2023-11-16 13:56:07 发布

阅读量99

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/catEatBird/p/7003755.html

版权

以下是简易效果：

<!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>

转载于:https://www.cnblogs.com/catEatBird/p/7003755.html

weixin_30346033

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每天一个JS 小demo之个人信息添加。主要知识点：DOM操作中的表格操作，节点操作...

以下是简易效果：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><header> <input type="text" value="z...
复制链接

扫一扫