JavaScript(五)——DOM案例

技術標籤：筆記 js dom

全選、刪除、新增功能實現
動態排序

<!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(){
				let tbody = this.parentElement.parentElement.parentElement;
				tbody.removeChild(this.parentElement.parentElement);
				reOrder();
			}
			let deletes = document.getElementsByName("delete");
			for(let d of deletes){
				d.addEventListener("click",deleteFunc);
			}
			
			//新增
			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="刪除";
				newButton.addEventListener("click",deleteFunc);
				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>

在這裡插入圖片描述

JavaScript(五)——DOM案例

JavaScript(五)——DOM案例

JavaScript HTML DOM 元素 (節點)新增，編輯，刪除操作例項分析

python遊戲開發的五個案例分享

JavaScript變數Dom物件的所有屬性

[Javascript] HTML5 DOM project

JavaScript HTML DOM 元素 (節點)

JavaScript 7—DOM

javascript中DOM獲取和設定元素的內容、樣式及效果

javascript基礎DOM物件

javascript基礎DOM物件6.1

JavaScript HTML DOM Select 物件

JavaScript HTML DOM Script 物件

JavaScript的DOM，BOM簡單介紹

簡單學習JavaScript和DOM

前端基礎進階-JavaScript核心 DOM BOM操作-第一天課後作業

JavaScript操作DOM物件

JavaScript之DOM操作

jQuery(五)——Dom的增刪改

JavaScript核心 DOM BOM操作——part3

javascript基礎DOM物件6.0

JavaScript(五)——DOM案例

相關推薦