JS表格操作案例

最新推荐文章于 2021-12-18 20:53:11 发布

jshyzx1999

最新推荐文章于 2021-12-18 20:53:11 发布

阅读量259

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/jshyzx1999/article/details/106071523

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表格操作案例

主要实现功能：

单击“修改”，将单元格变成可编辑状态，同时将"修改“二字变为”完成“。

单击”完成“，结束修改操作，并将”完成“改字变为”修改“。

按下enter键，结束修改操作，并将”完成“改字变为”修改“。

单击”删除“，将本行内容添加删除线（模拟删除），同时取消修改、删除的操作链接）

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#table{
			width:600px;
			height:200px;
			borer-collapse:collapse;
		}

		#table td,th{
			border:1px solid #c5c9ce;
		}

		#table th {
			background-color: #95b3d7;
			color:white;
		}
		#table td:first-child:last-child{
			text-aligh:center;
		}
		#table td:last-child{
			color:#2172b8;
			cursor:pointer;
		}

	</style>
</head>
<body>
	<table  id="table">
		<tr>
			<th>用户ID</th>	
			<th>用户姓名</th>	
			<th>手机号码</th>	
			<th>状态</th>	
			<th>操作</th>	
		</tr>
		<tr>
			<td>zhangshan</td>
			<td>张三</td>
			<td>13888889999</td>
			<td>可用</td>
			<td>
				<a onclick="update(1)">修改</a>
				<a onclick="deletes(1)">删除</a>
			</td>
		</tr>
		<tr>
			<td>lishi</td>
			<td>李四</td>
			<td>13888887777</td>
			<td>可用</td>
			<td>
				<a onclick="update(2)">修改</a>
				<a onclick="deletes(2)">删除</a>
			</td>
		</tr>
		<tr>
			<td>wanger</td>
			<td>王二</td>
			<td>13888886666</td>
			<td>可用</td>
			<td>
				<a onclick="update(3)">修改</a>
				<a onclick="deletes(3)">删除</a>
			</td>
		</tr>
		
	</table>
<script type="text/javascript">
	var table=document.getElementById("table");
	function deletes(index){
		var cells=table.rows[index].cells;
		if (!confirm("确认删除一条记录吗？")){
			alert("操作已取消");	
			return;
		}
		for (var i=0;i<cells.length;i++){
			cells[i].style.color="#CCC";
			cells[i].style.textDecoration="line-through";
		}
		var a=cells[cells.length-1].getElementsByTagName("a");
		 a[0].removeAttribute("onclick");
		 a[1].removeAttribute("onclick");
	}

	function update(index){
		var cells=table.rows[index].cells;
		var a=cells[cells.length-1].getElementsByTagName("a");
		if(a[0].innerText=="修改"){
			for(var i=0;i<cells.length-1;i++){
				cells[i].setAttribute("contenteditable","true");
			}
			a[0].innerText="完成";
		}else{
			for (var i=0;i<cells.length-1;i++){
				cells[i].setAttribute("contenteditable","false");
			}
			a[0].innerText="修改";
		}
		document.onkeyup=function(e){
			if(e.keyCode==13){
				return false;
				for (var i=0;i<cells.length-1;i++){
					cells[i].setAttribute("contenteditable","true");
				}
				a[0].innerText="修改";
			}
		}
	}


</script>
</body>
</html>

jshyzx1999

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS表格操作案例

表格操作案例主要实现功能：单击“修改”，将单元格变成可编辑状态，同时将"修改“二字变为”完成“。单击”完成“，结束修改操作，并将”完成“改字变为”修改“。按下enter键，结束修改操作，并将”完成“改字变为”修改“。单击”删除“，将本行内容添加删除线（模拟删除），同时取消修改、删除的操作链接）效果图：代码：<!DOCTYPE html><html><head> <title></title> <s
复制链接

扫一扫

专栏目录