点击编辑按钮，前端页面table中的一行更改的解决方案_一个表格页面如下图,点击某一行的编辑按钮,该行的编辑按钮变确认_wangzhiyuyeshou的博客

遇到的问题

首先，我是使用的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()+"'/>");
					$(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、数据库中表的数据查看
 
 若有不足，还请指教，新手起步，留作纪念，也供来者参考
                                    table 点击编辑 修改当前行先看效果图html+js<c:forEach items="${goodsS}" var="goods">
                    <tr bgcolor="#DEE5FA">
                        <td align="center" id="goodsId" class="txlrow"><c:out
<button type="button"class="layui-btn layui-btn-sm" onclick="update(this, {{type1.expressNum}})"><i class="layui-icon">&#xe66d;</i></button> <hr>
2，由这个点击按.
                                    昨天已经成功添加了一行，今天希望所添加的一行可以进行单元格编辑。
然而，发现添加了edit:’text’以后也不可以进行单元格编辑，而原本已有的数据可以，因此通过浏览器调试看了原有数据的样式，如图所示：
因此，将点击按钮添加一行<tr>标签的方法，修改为如下：
$("#addTable").click(function(){
var tr=" <tr>"+
   " <td data-field='domainId' data-edit='text'> <div class='layui-table-cell laytable-cell-1-domainId '>11 </div></td
                                    目录需求概述完整代码结果图
表头和表格数据都来自于后台，在表格的最后一列加上操作列，操作列中存放编辑和删除按钮，当表格行处于编辑状态时，按钮变为保存和修改按钮。
关于编辑状态的切换参考自： 链接.
<template>
  <el-container class="fillcontain">
    <el-main>
      <el-row>
        <el-col :span="24" ref="right">
//服务列表页面动态加载服务
      function ready() {
   var url = base_path+"console/cfg/getBaseLayers/"+configId;
   $.ajax({
      url:url,
      type:"get",
      dataT
                                    这里写目录标题请简述你对vue的理解请简述vue的单向数据流Vue中指令有哪些常用的修饰符v-text与{{}}与v-html区别v-on可以绑定多个方法吗Vuex是什么？怎么使用？在那种场景下使用Vue中路由跳转方式（声明式/编程式）路由中name属性有什么作用？vue跨域的解决方式Vue的生命周期请简述Vue路由模式hash和history，简单讲一下Vue生命周期的作用Vue路由传参的两种方式，params和query方式与区别Vue数据绑定的几种方式Vue注册一个全局组件vue.component 
                                    我们在做前端时，经常会要求文字只在一行显示。当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果不想让他换行要怎么办呢？通过CSS中的word-break,white-space可以达到不换行的效果。用CSS让文字在一行内显示不换行的方法一般的文字截断(适用于内联与块)：.text-overflow{display:block;/*内联对象需...
                                    element UI table 展开行优化element UI table 展开行只显示一行，解决异步显示问题vue.set介绍HTML代码js代码`如果感觉我的对你有用请点个赞，有问题可以讨论!`
element UI table 展开行只显示一行，解决异步显示问题
vue.set介绍
HTML代码
	<!-- 父级代码 -->
	<el-table
	:data="tableData"
    @expand-change="currRowchange"
    :row-key=
&lt;div class="ibox-content col-md-12" style="padding-top: 0px; border: 0px; height: 100%; width: 100%"&gt;
	&lt;table class="table" id="filedTable"&gt;