layui点击按钮添加可编辑的一行方法


Posted in Javascript onAugust 15, 2018

昨天已经成功添加了一行,今天希望所添加的一行可以进行单元格编辑。

然而,发现添加了edit:'text'以后也不可以进行单元格编辑,而原本已有的数据可以,因此通过浏览器调试看了原有数据的样式,如图所示:

layui点击按钮添加可编辑的一行方法

因此,将点击按钮添加一行<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>"+
   " <td data-field='colName' data-edit='text'> <div class='layui-table-cell laytable-cell-1-colName '>22 </div></td>"+
   " <td data-field='typeName' data-edit='text'> <div class='layui-table-cell laytable-cell-1-typeName '>33 </div></td>"+
   " <td data-field='scale'  data-edit='text'> <div class='layui-table-cell laytable-cell-1-scale  '>44 </div></td>"+
   " <td data-field='notNull' data-edit='text'> <div class='layui-table-cell laytable-cell-1-notNull '>55 </div></td>"+      
   " </tr>";                                                                 
 $(".layui-table-body .layui-table tbody").append(tr); });

效果如下:

layui点击按钮添加可编辑的一行方法

以上这篇layui点击按钮添加可编辑的一行方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js 中debug方式
Feb 07 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 #Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 #Javascript
React+Webpack快速上手指南(小结)
Aug 15 #Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 #Javascript
关于微信小程序bug记录与解决方法
Aug 15 #Javascript
layui select获取自定义属性方法
Aug 15 #Javascript
You might like
php cookies中删除的一般赋值方法
2011/05/07 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
小程序实现多列选择器
2019/02/15 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
JavaScript实现省市联动效果
2019/11/22 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
python操作MongoDB基础知识
2013/11/01 Python
python调用cmd命令行制作刷博器
2014/01/13 Python
Python动态加载模块的3种方法
2014/11/22 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
经销商会议欢迎词
2014/01/11 职场文书
异地年检委托书范本
2014/09/24 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
介绍信格式样本
2015/05/05 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书