点击编辑按钮，前端页面table中的一行更改的解决方案

概述

今天想要编写一个管理员管理用户的界面，显示用table显示出所有的数据库中的数据。然后通过编辑按钮可以编辑那一行的数据，并且可以保存，没做过不知道，太烦了

遇到的问题

首先，我是使用的javascript，innerHTML代码，将那一行表格中间的代码用来代替，这样就可以修改数据了，但是还要将编辑按钮改成确定与取消按钮
一开始是如下方式写的
js代码：

function edit(data){
	var str=data.parentNode.parentNode; //“编辑”框的祖父元素
	str.cells[1].innerHTML="<input type='text' value='"+str.cells[1].innerText+"'/>";	//第二列，第三列，第七列变为输入框
	str.cells[2].innerHTML="<input type='text' value='"+str.cells[2].innerText+"'/>";
	str.cells[3].innerHTML="<input type='text' value='"+str.cells[3].innerText+"'/>";
	str.cells[6].innerHTML="<input type='text' value='"+str.cells[6].innerText+"'/>";
	str.cells[7].innerHTML="<input  type='button' οnclick='save(this);' value='保存'/><input type='button' οnclick='resert();' value='取消'/>";
	//上面这行作用是将编辑按钮改成保存和取消按钮
}

最后一行的更改没有问题，但是点击事件没有用，即使我找网上方法将上述代码更改为：
"<input type=‘button’ οnclick=“save(this)” value=‘保存’/><input type=‘button’ οnclick=‘resert();’ value=‘取消’/>"
甚至直接点的：
"<input type=‘button’ οnclick=“alert(“hello!”)” value=‘保存’/><input type=‘button’ οnclick=‘resert();’ value=‘取消’/>"
怎么点击都没有反应

问题解决

后面找到了一篇文章，链接如下：
链接: https://blog.csdn.net/qq_28883885/article/details/70767629.
受到启发

更改代码如下：

//使用的是jquery
$(function(){
	//编辑按钮点击修改监听事件  功能是将数据上传到后台去
	$("input:button").click(function(){		
	//jquery中选择器就是这么写的，不懂可以搜选择器三个字，去了解了解
			if($(this).val()=="确认"){
	//val(),将input中value的值取出来，例如框的话，就是框中数据    这句话意思就是您点击了确认按钮，就会开始下列的ajax请求
				$.ajax({			//这是jquery下的ajax格式
					type:"post",	//传输类型  还可以为get
					url:"adminfun_action_update.action",
//前后端连接使用的是struts2  因此url直接填写action name 上的值就行了
					data:{
admin_id:$(this).parents("tr").children("#admin_id").children('input').val(),
//当前元素，向上为<tr>的父元素，在找到父元素下的所有特定id的孩子元素，在这些孩子元素中，找出其中有input的孙子元素，将其上的value传给json格式的对象
admin_name:$(this).parents("tr").children("#admin_name").children('input').val(),
admin_password:$(this).parents("tr").children("#admin_password").children('input').val(),
admin_power:$(this).parents("tr").children("#admin_power").children('input').val()
					},
					dataType:"json",
					success:function(res){
						if(res!=null)alert("提交成功");
					}	
				});
	    	}
	    	//三目运算符
			str=$(this).val()=="编辑"?"确认":"编辑";
			$(this).val(str);		//点击以后，相互变化
			
			//现在元素也就是$(this)为编辑按钮，parent(),找到其父元素，一般为表格的<td>元素
			//然后siblings为<td>元素的兄弟元素，each遍历这些兄弟元素,有些元素不用更改，因此在需要更改的元素上加了id
			$(this).parent().siblings("td[id]").each(function(){
				var obj_text = $(this).find("input:text");
				if(!obj_text.length)							// 如果没有文本框，则添加文本框使之可以编辑
					$(this).html("<input type='text' value='"+$(this).text().trim()+"'/>");
				else
					$(this).html(obj_text.val());
			})
		});		
	});

上述代码注释详细，若不懂，可百度。

接下来就是后端代码的接收：

//获取到request
HttpServletRequest request = ServletActionContext.getRequest();
//获取前端传来的id选项 name选项 passwd选项 和权限选项
admin_id = Integer.parseInt(request.getParameter("admin_id"));
admin_name = request.getAttribute("admin_name").toString();
admin_password = request.getParameter("admin_password").toString();
admin_power = Integer.parseInt(request.getParameter("admin_power"));

接下来接上几张图（看看效果）

1、更改前
2、点击编辑指定的更改为input text框

3、改前的mysql中的表

4、修改数据

5、点击确认

6、数据库中表的数据查看

若有不足，还请指教，新手起步，留作纪念，也供来者参考