jquery实现单击按钮文本变input输入框修改数据

jquery实现单击按钮文本变input输入框修改数据

代码

html

<table class="listtable">
      <caption>所有部门:</caption>
      <tr class="listheader">
          <th>部门编号</th>
          <th>部门名称</th>
          <th>操作</th>
      </tr>
      <tr>
           <td>1</td>
           <td id="depar">财物部</td>
           <td>
			  <input id="edit" class="clickbutton" type="submit" value="编辑"/>
			  <input id="cancel" class="clickbutton" type="hidden" value="取消"/>
			  <input id="del" class="clickbutton" type="button" value="删除"/>
           </td>
      </tr>
                    
</table>

js

<script>
$(function(){
			//先拿出原文本，以备取消使用；
			var old = $('#depar').html();
			//点击（修改&提交）
			$('#edit').click(function(){
				//判断按钮是否是提交按钮
				if($('#edit').attr('value')!=='提交'){
				//不是
					//把原文本复盖，填充原文本到value
	$('#depar').html("<input id='inp' type='text' name='editname' value="+old+" >");
					//改变type属性把取消按钮显示出来
					$('#cancel').attr('type','button');
					//改变value属性把修改为提交
					$('#edit').attr('value','提交');
				}else{
				//是
					alert($('#inp').val());
				}
				});
    
			//点击取消
			$("#cancel").click(function(){
				//改变value属性把提交改为编辑
				$('#edit').attr('value','编辑');
				//将原文本填充，并复盖<input ........>
				$('#depar').html(old);
				//将取消隐藏
				$('#cancel').attr('type','hidden');
				});
    
			//点击删除
			$('#del').click(function(){
				alert("删除！");
				})
			});
</script>

图片

​
未操作

​ 点击编辑

​ 点击提交

ps:2020/10/6随笔笔记