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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
JS event使用方法详解
Apr 28 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
vue实现固定位置显示功能
May 30 Javascript
Vue学习之组件用法实例详解
Jan 06 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP7新功能总结
2019/04/14 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
通过实例解析python and和or使用方法
2020/11/14 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
管理信息系学生的自我评价
2014/01/11 职场文书
安全生产检查通报
2014/01/29 职场文书
护理中职生求职信范文
2014/02/24 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
伦敦奥运会口号
2014/06/13 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
贷款收入证明格式
2015/06/24 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python