JS实现弹性运算框

最新推荐文章于 2020-06-23 16:52:42 发布

君丶Xjion

最新推荐文章于 2020-06-23 16:52:42 发布

阅读量211

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_44077840/article/details/93758561

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹性运算</title>
		<style type="text/css">
			table{
				text-align: center;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<!--创建表-->
		<table id="tab" border="1px">
			<tr>
				<td colspan="2"><button id="add">添加</button></td>
				<td colspan="2"><button id="del">删除</button></td>
			</tr>
			<tr>
				<td></td>
				<td>Name</td>
				<td>Age</td>
				<td>Address</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="" id="" value="" onclick="change(this)"/></td>
				<td>Tom</td>
				<td>20</td>
				<td>China</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		//改变表格的状态
		function change(node){
			//获取当前这一行的tr的所有信息
			var tr = node.parentNode.parentNode;
			//获取所有的td信息
			var tdAll = tr.children;
			//如果复选框被选中
			if (node.checked) {
				//循环遍历td信息
				for (var i = 1; i < tdAll.length; i++) {
					//获取td中的所有文本节点
					var str = tdAll[i].innerText;
					//清空td里的所有节点
					tdAll[i].innerHTML = "";
					//创建input文本输入节点
					var inp = document.createElement("input");
					//设置文本输入属性
					inp.setAttribute("type","text");
//					inp.type = "text";
					//设置文本值
					inp.value = str;
					//把创建好的文本输入框放入td
					tdAll[i].appendChild(inp);
				}
				//如果没选中
			}else{
				//遍历td
				for (var i = 1; i < tdAll.length; i++) {
					//获取所有td下的下标为0的子节点，就是input
					var inp = tdAll[i].children[0];
					//获取里面的值
					var str = inp.value;
					//删除td中的input节点
					inp.remove();
					//给表格设置节点
					tdAll[i].innerHTML = str;
				}
			}
		}
		
		//动态绑定添加,addEcentListener是对事件的监听
		document.getElementById("add").addEventListener("click",function(){
			//根据id获取表格节点
			var table = document.getElementById("tab");
			//创建tr
			var tr = document.createElement("tr");
			//创建td
			var td = document.createElement("td");
			//创建文本输入表单
			var inp = document.createElement("input");
			//添加type属性为复选框
			inp.setAttribute("type","checkbox");
//			inp.type = "checkbox";
			//设置onclick触发change事件
			inp.setAttribute("onclick","change(this)");
			//选中时为true
			inp.checked = true;
			//把input添加到td里
			td.appendChild(inp);
			//再把td添加到tr
			tr.appendChild(td);
			for (var i = 0; i < 3; i++) {
				//创建td
				td = document.createElement("td");
				//创建文本输入表单
				inp = document.createElement("input");
				//添加type属性为复选框
				inp.setAttribute("type","text");
//				inp.type = "text";
				//把input添加到td里
				td.appendChild(inp);
				//再把td添加到tr
				tr.appendChild(td);
			}
			//获取table，向其中添加数据
			table.children[0].appendChild(tr);
		});
		
		//动态绑定删除事件
		//获取id为del的节点，对其添加监听事件
		document.getElementById("del").addEventListener("click",function () {
			//获取所有的input
			var ckAll = document.querySelectorAll("input[type='checkbox']");
			//对input进行遍历
			ckAll.forEach(function (item) {
				//如果是被选中状态
				if (item.checked){
					//删除这一行数据
					item.parentNode.parentNode.remove();
				}
			})
			//遍历
			// for (var i = ckAll.length-1; i >=0; i--) {
				//选中状态
			// 	if (ckAll[i].checked){
				//删除
			// 		ckAll[i].parentNode.parentNode.remove();
			// 	}
			// }
		});
	</script>
</html>

君丶Xjion

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现弹性运算框

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>弹性运算</title> <style type="text/css"> table{ text-align: center; width: 100%; ...
复制链接

扫一扫