layui点击按钮添加可编辑行

在网上看的大部分讲的都不是特别的通顺，而且就那么几篇文章都是一摸一样的内容，跟着我走让你做出来。

废话不多，直接上代码

layui点击按钮添加可编辑行

点击添加，新增一条空白信息。我们首先要找到列表的源码才行，要不然即使新增了有可能会重复添加覆盖等问题。

layui点击按钮添加可编辑行

在看js中，承载数据的标签

layui点击按钮添加可编辑行

然后，在进行添加按钮的触发。

点击添加按钮执行以下代码：

注意：tr td的标签和div标签，请根据你的列表源码进行适当修改

var tr=" <tr index=1>"+
      " <td><div class='layui-table-cell laytable-cell-1-0-0'></div></td>"+
      " <td data-field='id' data-edit='text'><div class='layui-table-cell laytable-cell-1-0-1'></div></td>"+
      " <td data-field='applicationName' data-edit='text'><div class='layui-table-cell laytable-cell-1-0-2'></div></td>"+
      " <td data-field='applicationIcon' data-edit='text'><div class='layui-table-cell laytable-cell-1-0-3'></div></td>"+
      " <td data-field='applicationLink' data-edit='text'><div class='layui-table-cell laytable-cell-1-0-4'></div></td>"+
          " <td data-field='applicationDescribe' data-edit='text'><div class='layui-table-cell laytable-cell-1-0-5'></div></td>"+
      " <td data-field='uid' data-edit='text'><div class='layui-table-cell laytable-cell-1-0-6'></div></td>"+
      " <td data-field='6' align='center' data-content='' data-minwidth='50'>"+
      "<a class='layui-btn layui-btn-xs data-count-edit' lay-event='edit'>编辑保存</a><a class='layui-btn layui-btn-xs layui-btn-danger data-count-delete' lay-event='delete'>删除</a>"+
      "</td>"+
      " </tr>";
          $(".layui-table-main .layui-table tbody").append(tr);
          var data1={id:"",applicationName:"",applicationIcon:"",applicationLink:"",applicationDescribe:"",uid:""};
          dataAdd.push(data1); //将一条空白数据添加到dataAdd结果集中
       table.reload('currentTableId',{
       data : dataAdd //将数据重新渲染到列表中
       });

这样就完成了添加一行的操作，也不会出现属性未识别。

layui点击按钮添加可编辑行

相关推荐