使用javascript在页面的表格中实现点击变表单可以修改值,修改完成变成普通文本

本文介绍了如何使用JavaScript在网页表格中实现点击数据变为可编辑表单,编辑完成后恢复为普通文本,并在内容修改后通过AJAX异步提交到数据库的过程。涉及的关键步骤包括添加点击事件、动态创建和删除DOM元素、以及处理失焦事件来提交修改。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

要实现一个功能就是在我们的网页展示的表格数据中点击某条数据就变成表单文本框可以修改内容,修改完成后还变回原来的普通文本:下面是效果展示图以及实现过程和代码:

1.效果展示图:单击时候改变样式,修改完成样式变回原来的

在这里插入图片描述

2.该功能主要是在html页面中使用javascript来实现,首先需要给该条数据添加一个单击事件,this代表当前标签,代码是:

<td><span onclick="changename(this)">张三</span></td>

3.下面是该单击事件指向的方法内容在script中来完成:

3.1先获得点击的标签中的值储存在name中,然后清空原先的普通文本标签数据
3.2然后在这个标签的父标签里面添加一个input表单标签用来修改数据,这就需要把刚才得到的数据给到这个input标签的value属性,并且给input标签添加一个失焦事件用来做修改内容提交以及变回原来的普通文本标签操作
3.3给input标签添加一个主动触发事件让input标签自己主动获得焦点
3.4删掉原来的普通文本标签
3.5修改完成后还要完成一个功能就是把修改的内容异步提交到数据库中,并且文本框变回原来的样式,这些操作在input的失焦事件的方法中完成
3.6首先可以判断表单中的值是否改变,不改变就不需要提交异步操作,如果改变了就提交异步请求修改数据库中的数据,ajax的异步请求这里就不多演示,可以看我的另外一篇文章是完成异步请求的功能,点击查看:异步请求的实现过程
3.7最后就是在父标签中添加原来的普通文本标签并且赋值,再删掉input文本框就可以了
<script type="text/javascript">
		function changename(s){
			/* 获得表格数据 */
			var name = $(s).html();
			/* 清空数据 */
			$(s).html("");
			/* 在td里面加一个表单 ,,并且添加失焦时间*/
			$(s).parent().append("<input value='"+name+"'/>");
			/* 通过父标签的子标签得到input表单 */
			$(s).parent().children("input").attr("onblur","nameblur(this,'"+name+"')");
			/* 通过focus主动触发,获得焦点 */
			$(s).parent().children("input").focus();
			/* 删掉原有的标签 */
			$(s).remove();
		}
		/* 表单失焦事件 */
		function nameblur(inp,name){
			/* 判断表单内的值是否改变 */
			var val = $(inp).val();
			if(val != name){
				alert("这里是发送异步请求,修改数据库操作");
			}
			/* 在td里面加回来span,值就是val*/
			$(inp).parent().append("<span onclick='changename(this)'>"+val+"</span>");
			/* 删除input标签 */
			$(inp).remove();
		}
	</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值