编辑-保存-取消

最新推荐文章于 2022-10-26 18:46:42 发布

不是我的货

最新推荐文章于 2022-10-26 18:46:42 发布

阅读量926

点赞数

分类专栏： js 文章标签： function javascript

本文链接：https://blog.csdn.net/wym1581/article/details/45244483

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  <style stye="text/css">
	.dialog{width:160px;height:40px;line-height:40px;text-align:center;}
	#box{margin:100px auto;}
	input{height:25px;border:1px solid green;}
	#box .tmui-btns{display:none}
  </style>
 </head>
 <body>

	<div id="box">
		<div class="item">
			<div class="name" title="11111">11111</div>
			<a href="javascript:void(0)" data-opid="1" class="tmui-btns save">保存</a>
			<a href="javascript:void(0)" class="tmui-btns cancle">取消</a> 
			<a href="javascript:void(0);" class="edit">编辑1</a>

		</div>
		<div class="item">
			<div class="name" title="22222">22222</div>
			<a href="javascript:void(0)" data-opid="2"  class="tmui-btns save">保存</a>
			<a href="javascript:void(0)" class="tmui-btns cancle">取消</a> 
			<a href="javascript:void(0);" class="edit">编辑1</a>
		</div>
		<div class="item">
			<div class="name" title="333333">333333</div>
			<a href="javascript:void(0)" data-opid="3" class="tmui-btns save">保存</a>
			<a href="javascript:void(0)" class="tmui-btns cancle">取消</a> 
			<a href="javascript:void(0);" class="edit">编辑1</a>
		</div>
	</div>
	<script type="text/javascript">
		
		$(function(){

			//编辑事件
			$("#box").find(".edit").click(function(){//====查询box下面 class="edit"
				//获取修改的名字的框
				var $name = $(this).parent().find(".name");
				//获取div里面的文本内容
				var text = $name.text();
				//隐藏当前的编辑按钮
				$(this).hide();
				//显示保存和取消按钮
				$(this).parent().find(".tmui-btns").show();
				//给div加入一个输入框，并且把内容放入在input中
				$name.html("<input type='text' class='itemvalue' value='"+text+"'>");
				//并且选中要修改的内容
				$name.find(".itemvalue").select();
			});

			//取消事件
			$("#box").find(".cancle").click(function(){
				//获取name的对象
				var $name = $(this).parent().find(".name");	
				//把title的值重新赋给div
				$name.html($name.attr("title"));
				//隐藏保存按钮和取消按钮给隐藏
				$(this).parent().find(".tmui-btns").hide();
				//编辑按钮显示出来
				$(this).parent().find(".edit").show();
			});

			//保存事件
			$("#box").find(".save").click(function(){
				//获取name的对象
				var $name = $(this).parent().find(".name");	
				//获取文本框的内容
				var newValue = $(this).parent().find(".itemvalue").val();
				//获取元素的标题
				var title = $name.attr("title");
				//这里如点击保存的时候如果没有发生任何的变化执行取消事件.
				if(newValue!="" && title == newValue){
					//trigger事件触发
					 $(this).parent().find(".cancle").trigger("click");	//触发我们的取消事件
					return;
				}

				if(newValue!="" && newValue.length<100){
					var opid = $(this).data("opid");
					$name.attr("title",newValue).html(newValue);
					alert("您要修改的id是:"+opid+"文件名是:"+newValue);
					//执行一个ajax把新的文件名通过id去修改数据库的信息
					$(this).parent().find(".tmui-btns").hide();
					$(this).parent().find(".edit").show();
				}else{
					alert("请输入文件名称或者文件名不得超过100");
				}
			});


		});
	</script>
 </body>
</html></span>