JavaScript(五)——DOM案例

最新推荐文章于 2023-09-17 22:28:46 发布

老蛙@

最新推荐文章于 2023-09-17 22:28:46 发布

阅读量211

点赞数

分类专栏：笔记文章标签： js dom

本文链接：https://blog.csdn.net/m0_48468380/article/details/112665093

版权

笔记专栏收录该内容

84 篇文章 3 订阅

订阅专栏

全选、删除、添加功能实现
动态排序
事件委托的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM案例</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			table{
				position: static;
				margin: auto auto;
				width: 400px;
			}
			td{
				text-align: center;
			}
			.addBtn{
				margin-left: 49%;
			}
			#add{
				position: fixed;
				width: 300px;
				height: 100px;
				border: black 1px solid;
				margin-left:42%;
				margin-top: 10%;
				display: none;
			}
			#ok{
				position: relative;
				left: 25%;
			}
			#cancel{
				position: relative;
				left: 50%;
			}
		</style>
	</head>
	<body>
		<table border="1px black solid" cellspacing="5px" cellpadding="2px">
			<tr>
				<th>
					<input type="checkbox" id="selectAll" />全选
					
				</th>
				<th>
					序号
				</th>
				<th>
					姓名
				</th>
				<th>
					操作
				</th>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="select" />选定
				</td>
				<td name="idCode">
					1
				</td>
				<td>
					张三
				</td>
				<td>
					<button type="button" name="delete">删除</button>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="select"/>选定
				</td>
				<td name="idCode">
					2
				</td>
				<td>
					李四
				</td>
				<td>
					<button type="button" name="delete">删除</button>
				</td>
			</tr>
		</table>
		<br>
		<button type="button" id="addBtn" class="addBtn">添加</button>
		<div id="add">
			序号<span id="code"></span><br>
			姓名<input type="text" id="addName"/><br><br>
			<button type="button" id="ok">确定</button>
			<button type="button" id="cancel">取消</button>
		</div>
		<script type="text/javascript">
			//全选
			let selectAll = document.getElementById("selectAll");
			let selects = document.getElementsByName("select");
			selectAll.addEventListener("click",()=>{
				for(let s of selects){
					s.checked=selectAll.checked;
				}
				console.log(selects.length);
			});
			
			//删除
			function reOrder(){
				let codes = document.getElementsByName("idCode");
				for(let i=1;i<=codes.length;i++){
					codes[i-1].innerHTML=i;
				}
			}
			function deleteFunc(btn){
				let tbody = btn.parentElement.parentElement.parentElement;
				tbody.removeChild(btn.parentElement.parentElement);
				reOrder();
			}
			//事件委托，在table上注册事件，当事件源是删除按钮时执行
			document.getElementsByTagName("table")[0].addEventListener("click",(e)=>{
				if(e.target.name=="delete"){
					deleteFunc(e.target);
				}
			});
			
			//添加
			let add = document.getElementById("add");
			let addBtn = document.getElementById("addBtn");
			let ok = document.getElementById("ok");
			let cancel = document.getElementById("cancel");
			let addName = document.getElementById("addName");
			function reset(){
				addName.value="";
			}
			function addFunc(){
				let newSelect = document.createElement("input");
				let newTd1 = document.createElement("td");
				let newTd2 = document.createElement("td");
				let newTd3 = document.createElement("td");
				let newTd4 = document.createElement("td");
				let newTr = document.createElement("tr");
				let newButton = document.createElement("button");
				
				newSelect.name="select";
				newSelect.type="checkbox";
				newTd1.appendChild(newSelect);
				newTd1.append(document.createTextNode("选定"));
				newTd2.innerText=selects.length+1;
				newTd2.setAttribute("name","idCode");
				newTd3.innerText=addName.value;
				newButton.type="button";
				newButton.name="delete";
				newButton.innerText="删除";
				newTd4.appendChild(newButton);
				newTr.appendChild(newTd1);
				newTr.appendChild(newTd2);
				newTr.appendChild(newTd3);
				newTr.appendChild(newTd4);
				
				let tbody = document.getElementsByTagName("table")[0].children[0];
				tbody.appendChild(newTr);
			}
			ok.addEventListener("click",()=>{
				addFunc();
				reset();
				add.style.display="none";
			})
			cancel.addEventListener("click",()=>{
				reset();
				add.style.display="none";
			})
			addBtn.addEventListener("click",()=>{
				let code = document.getElementById("code");
				code.innerHTML=selects.length+1;
				add.style.display="block";
			})
		</script>
	</body>
</html>