Click the edit button, the solution to change a line in the table on the front page

overview

Today I want to write an interface for administrators to manage users, displaying all the data in the database with tables. Then you can edit the data of that line through the edit button, and you can save it. I don’t know if I haven’t done it. It’s too annoying.

problems encountered

First of all, I use javascript, innerHTML code, and replace the code in the middle of the row of tables, so that the data can be modified, but the edit button needs to be changed to confirm and cancel buttons. At first, the js code was written in the following
way
:

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='取消'/>";
	//上面这行作用是将编辑按钮改成保存和取消按钮
}

There is no problem with the change of the last line, but the click event is useless, even if I find an online method to change the above code to:
"<input type='button' οnclick="save(this)" value='save'/><input type ='button' οnclick='resert();' value='Cancel'/>"
or even directly:
"<input type='button' οnclick="alert("hello!")" value='save'/ ><input type='button' οnclick='resert();' value='cancel'/>" No
matter how you click, there is no response

problem solved

I found an article later, the link is as follows:
Link: https://blog.csdn.net/qq_28883885/article/details/70767629 .
Inspired

Change the code as follows:

//使用的是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());
			})
		});		
	});

The above code comments are detailed, if you don’t understand, you can Baidu.

Next is the reception of the back-end code:

//获取到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"));

Next, connect a few pictures (see the effect)

1. Before modification
2. Click to edit and specify to change to the input text box

3. The table in mysql before modification

4. Modify data

5. Click to confirm

6.

If there is any shortage of data in the table in the database, please advise, beginners , kept as a souvenir, and also for the reference of those who come