JavaScript 表格的增删改查

深藏阁楼爱情的钟 2021-12-05 02:34 250阅读 0赞

<!DOCTYPE html>
    <html>
    	
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>DOM操作</title>	
    	</head>
    	<style>		
    		#detail{
    			width:200px;
    			height:200px;
    			border:1px solid black;		
    			display :none;
    			position:absolute;
    			left:500px;
    			top:300px;
    			background:#fff;
    		}
    	</style>
    	<body>
    		标题：<input type="text" id="topic_name" size="60" value="111"/><br>
    		内容：<input type="text" id="topic_content" size="60" value="222"/><br>
    		作者：<input type="text" id="author" size="60" value="333"/><br>
    		<button id="saveBtn">保存</button>
    		<table id="tab" border=1>
    			<tr>
    				<th>ID</th><th>帖子名称</th><th>内容预览</th><th>发布时间</th><th>作者</th><th>操作</th>
    			</tr>
    			<tr style="display: none;">
    				<td>2222</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>LCE</td><td name="option"><a name="detail" href="#">详细信息</a> <a class="delbtn" href="javascript:;">删除</a></td>
    			</tr>
    			<tr>
    				<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>LCE</td><td name="option"><a name="detail" href="#">详细信息</a> <a class="delbtn" href="javascript:;">删除</a></td>
    			</tr>
    			<tr>
    				<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>LCE</td><td name="option"><a name="detail" href="#">详细信息</a> <a class="delbtn" href="javascript:;">删除</a></td>
    			</tr>
    			<tr>
    				<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>LCE</td><td name="option"><a name="detail" href="#">详细信息</a> <a class="delbtn" href="javascript:;">删除</a></td>
    			</tr>
    			<tr>
    				<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>LCE</td><td name="option"><a name="detail" href="#">详细信息</a> <a class="delbtn" href="javascript:;">删除</a></td>
    			</tr>
    			<tr>
    				<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>LCE</td><td name="option"><a name="detail" href="#">详细信息</a> <a class="delbtn" href="javascript:;">删除</a></td>
    			</tr>
    		</table>
    		<div id="detail"></div>
    	</body>	
    </html>
    <script src="../../../../public.js"></script>
    <script> 
    	
    	var saveBtn = $id("saveBtn");
    	var topic_name = $id("topic_name");
    	var  topic_content = $id("topic_content");
    	var author = $id("author");
    	var tab = $id("tab");
    	var detail = $id("detail");
    	
    	//1点击saveBtn
    	saveBtn.onclick = function(){
    		//2.获取topic_name的value nVal
    		var nVal = topic_name.value;
    		//3.获取 topic_content的value cVal
    		var cVal = topic_content.value;
    		//4.获取 author的value aVal
    		var aVal = author.value;
    		//5.克隆第二个tr
    		//var tr = tab.children[0];//浏览器会自动解析生成一个tbody
    		//console.log(tr);//undefined
    		var tr = tab.children[0].children[1].cloneNode(true);
    		//显示tr
    		tr.style.display = "table-row";
    		//6.在克隆 的节点的td中填充对应内容
    		tr.children[1].innerHTML = nVal;
    		tr.children[2].innerHTML = cVal;
    		tr.children[3].innerHTML = dateToString(new Date());
    		tr.children[4].innerHTML = aVal;
    		//7.把这个节点添加到table下的tbody中
    		tab.children[0].appendChild(tr);
    		
    	}
    	
    	//事件委托
    	tab.onclick = function(eve){
    		var e = eve || event;
    		var target = e.target || e.srcElement;
    		//把单击事件委托给tab
    			//删除
    		if(target.className === "delbtn"){
    			//1.//将事件指定在delbtn上
    					//找到当前的行删除
    			target.parentNode.parentNode.parentNode.removeChild(target.parentNode.parentNode);
    			
    		}
    			//查询
    			//2.将事件指定在detail上
    		if(target.getAttribute("name") === "detail"){
    			e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    			//显示 detail的div
    			detail.style.display = "block";
    			//调整div位置到当前坐标位置
    			detail.style.left = e.clientX + "px";
    			detail.style.top = e.clientY + "px";
    			//把当前行对应的内容赋值给div
    			detail.innerHTML = target.parentNode.parentNode.children[2].innerHTML;
    		}
    			//修改
    			//3.将事件指定在除了option的这个td的其它td上
    		if(target.nodeName.toLowerCase() == "td" && target.getAttribute("name") != "option"){
    			//创建一个input
    			var input = document.createElement("input");
    			//把原内容添加给value
    			input.value = target.innerHTML;
    			//先将原内容清空
    			target.innerHTML = "";
    			//把input添加到当前 td中
    			target.appendChild(input);
    			//input立即获取焦点
    			input.focus();
    			//input失去焦点
    			input.onblur = function(){
    				//将当前input的内容交给当前的td
    				target.innerHTML = this.value;
    			}
    		}
    	}
    	
    	//点击文档详情页消失
    	document.onclick = function(){
    		detail.style.display = "none";
    	}
    </script>