layui点击数据表格添加或删除一行的例子

数据表格

t2 = {
      elem: '#test2',
      data: tableData2,
      page: false,
      width: $(parent.window).width()-50,
      cols: [[
        {type:'checkbox',field:'id'},
        {field:'cstMoldNo', title: '客户模号',edit:'text'},
        {field:'cstProdName', title: '产品名称',edit:'text'},
        {field:'material', title: '产品材料',edit:'text'},
        {field:'firstTryDate', title: '验证日期',edit:'text'},
        {field:'deliveryDate', title: '交货日期',edit:'text'},
        {field:'unit', title: '单位',edit:'text'},
        {field:'count',   title: '数量',edit:'text'},
        {field:'upTax',   title: '含税单价',edit:'text'},
        {field:'priceTax',    title: '含税金额',edit:'text'},
        {field:'remark', title: '备注',edit:'text'},
        {fixed: 'right', title: '操作',width: '10%',align: 'center',toolbar: '#barDemo'}
      ]]
    };

点击添加一行

 document.getElementById('addsome2').addEventListener('click',function (data) {
      var oldData = table.cache["test2"];
      var data1={};
      oldData.push(data1);
      table.reload('test2',{data : oldData});
    });

点击删除一行

 if(obj.event === "del"){
        layer.confirm("你确定要删除么？",{btn:['是的,我确定','我再想想']},
            function(){
              var oldData = table.cache["test2"];
              oldData.splice(obj.tr.data('index'),1);
              layer.msg("删除成功",{time: 10},function(){
                table.reload('test2',{data : oldData});
              });
            }
        )
      }

以上这篇layui点击数据表格添加或删除一行的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    昨天已经成功添加了一行,今天希望所添加的一行可以进行单元格编辑. 然而,发现添加了edit:'text'以后也不可以进行单元格编辑,而原本已有的数据可以,因此通过浏览器调试看了原有数据的样式,如图所示: 因此,将点击按钮添加一行<tr>标签的方法,修改为如下: $("#addTable").click(function(){ var tr=" <tr>"+ " <td data-field='domainId' data-ed

  • Layui给数据表格动态添加一行并跳转到添加行所在页的方法

    Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行

  • layui实现点击按钮给table添加一行

    •问题描述:想实现点击按钮在表格添加一行的功能,但发现layuii并未集成该工具栏,因此,需要自己手动添加这个功能: •原先我写的table是这样实现的: $("#addTable").click(function(){ var tr=" <tr>"+ " <td>11</td>"+ " <td>22</td>"+ " <td>33</td

  • 解决layui的input独占一行的问题

    1.input标签独占一行,与button标签无法同行显示 (使用position属性进行设置,position属性详见.) 解决方法: 一.对button的position进行设置,使之与input同行. 二.将input与button放在一个大div中,然后将input的div的class定义成layui-inline,button放在独自的div里时也要定义div的class为layui-inline: (如果想让几个input同行,就把他们放在一个大的div里,大的div的class为l

  • layui table设置某一行的字体颜色方法

    table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行tr,修改其样式中的颜色. //设置layui datatable的某一行的颜色 //TabDivId:tab父div id;RowIndex:行序列号,从0开始:ColorString:颜色字符串,如'#123456' function Layui_SetDataTableRowColor(Tab

  • layui点击数据表格添加或删除一行的例子

    数据表格 t2 = { elem: '#test2', data: tableData2, page: false, width: $(parent.window).width()-50, cols: [[ {type:'checkbox',field:'id'}, {field:'cstMoldNo', title: '客户模号',edit:'text'}, {field:'cstProdName', title: '产品名称',edit:'text'}, {field:'material',

  • django 在原有表格添加或删除字段的实例

    一.如果models.py文件为时: timestamp = models.DateTimeField('保存日期') 会提示: (env8) D:\Desktop\env8\Scripts\mysite>python manage.py makemigrations You are trying to add a non-nullable field 'timestamp' to article without a defa ult; we can't do that (the databas

  • js动态实现表格添加和删除操作

    js动态实现表格添加和删除操作

    本文实例为大家分享了js动态实现表格添加和删除的具体代码,供大家参考,具体内容如下 运行效果如图(两种实现方案,被注释的是第一种实现方案) 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ text-al

  • layui的数据表格+springmvc实现搜索功能的例子

    如下所示: 主要在前端页面加: <div class="demoTable"> 搜索ID: <div class="layui-inline"> <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off"> </div> <span class=&

  • layui多图上传实现删除功能的例子

    在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-upload"> <button type="button" class="layui-btn" id="test2">多图片上传</button> <blockquote class="layui

  • jquery动态添加删除一行数据示例

    复制代码 代码如下: <html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.9.1.js"><

  • jQuery实现用户信息表格的添加和删除功能

    jQuery实现用户信息表格的添加和删除功能

     1.浏览器界面 一个简单的用户信息操作 2.html代码 <body> <form name="userForm"> <center> 用户录入 <br /> 用户名: <input id="username" name="username" type="text" size=15 /> E-mail: <input id="email"

  • JQuery动态添加和删除表格行的方法

    本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 复制代码 代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href='javascript:voi

  • 原生JS和JQuery动态添加、删除表格行的方法

    本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

随机推荐