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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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设计模式 Singleton(单例模式)
2011/06/26 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
Python中格式化字符串的四种实现
2020/05/26 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
Linux的主要特性
2016/09/03 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
初中化学教学反思
2014/01/23 职场文书
护理专业求职信
2014/06/15 职场文书
暑期学习心得体会
2014/09/02 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
见义勇为事迹材料
2014/12/24 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers