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 相关文章推荐
flexigrid 参数说明
Nov 23 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
详解jquery选择器的原理
Aug 01 jQuery
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 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
Joomla使用Apache重写模式的方法
2016/05/04 PHP
让焦点自动跳转
2006/07/01 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
利用Python如何批量更新服务器文件
2018/07/29 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
python文件及目录操作代码汇总
2020/07/08 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
python定义具名元组实例操作
2021/02/28 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
自我鉴定 电子商务专业
2014/01/30 职场文书
文明礼仪标语
2014/06/13 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
灵魂歌王观后感
2015/06/17 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书