JavaScript 表格的增删改查

最新推荐文章于 2021-09-26 09:47:23 发布

mikibiubiu

最新推荐文章于 2021-09-26 09:47:23 发布

阅读量290

点赞数

分类专栏： Javascipt 案例

本文链接：https://blog.csdn.net/mikibiubiu/article/details/96327418

版权

Javascipt 案例专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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