精华内容
下载资源
问答
  • jQuery动态增加表格一行和删除一行

    千次阅读 2018-11-07 22:22:41
    jQuery动态增加表格一行和删除一行

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

    也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

                   

    今天在处理表格的动态增加一行,和删除一行,一开始用js,但是写起来有点复杂,而且不好控制,最后还是用了jQuery,很轻松的就搞定了,代码如下:

    $(document).ready(function() {
     $("#newBtn").bind("click", function(){
      //alert($("input:checked"));
      $("#myTable").append("<tr><td><input id=\"sd\" type=\"checkbox\" /></td><td><input type=\"text\" /></td></tr>");
      alert(document.getElementById('sd').value);
     });
     
     $("#delBtn").bind("click", function(){
      //alert($("input:checked"));
      $("input:checked").parent().parent().remove();
     });
     
    });

    这样就可以轻松的搞定了,也可以进行多行的删除

               

    给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

    这里写图片描述
    展开全文
  •  下面是在表格末尾添加数据,由于添加的数据已没有原本的单元格样式,所以需要设置他的单元格样式与上文保持一致。  pandas 如何获取所需数据的索引(判断条件可以改变,结果为列表) import openpyxl from ...

     openpyxl 添加数据的时候不需要复制表格,这点尤为方便。

     下面是在表格末尾添加数据,由于添加的数据已没有原本的单元格样式,所以需要设置他的单元格样式与上文保持一致。

     pandas 如何获取所需数据的索引(判断条件可以改变,结果为列表)

    import openpyxl
    from openpyxl.styles import PatternFill, Alignment
    import pandas as pd
    
    
    # 更改写入数据的样式,与已有数据样式保持一致
    # line为行数
    def style(line):
        # 数据格式
        # tm = ws['H2'].number_format
        # print(tm)
        # 背景颜色
        fl = PatternFill("solid", fgColor='fde9d9')
        # 水平居右
        al = Alignment(horizontal='right',)
        ws['A{}'.format(line)].alignment = al
        ws['A{}'.format(line)].number_format = ws['A2'].number_format
        ws['B{}'.format(line)].number_format = ws['B2'].number_format
        ws['C{}'.format(line)].fill = fl
        ws['C{}'.format(line)].number_format = ws['C2'].number_format
        ws['D{}'.format(line)].number_format = ws['D2'].number_format
        ws['E{}'.format(line)].fill = fl
        ws['E{}'.format(line)].number_format = ws['E2'].number_format
        ws['F{}'.format(line)].number_format = ws['F2'].number_format
        ws['G{}'.format(line)].number_format = ws['G2'].number_format
        ws['H{}'.format(line)].fill = fl
        ws['H{}'.format(line)].number_format = ws['H2'].number_format
        ws['I{}'.format(line)].number_format = ws['I2'].number_format
        ws['J{}'.format(line)].number_format = ws['J2'].number_format
        ws['K{}'.format(line)].number_format = ws['K2'].number_format
        ws['L{}'.format(line)].number_format = ws['L2'].number_format
        ws['M{}'.format(line)].number_format = ws['M2'].number_format
        ws['N{}'.format(line)].number_format = ws['N2'].number_format
        ws['O{}'.format(line)].number_format = ws['O2'].number_format
        ws['P{}'.format(line)].number_format = ws['P2'].number_format
        ws['Q{}'.format(line)].number_format = ws['Q2'].number_format
        ws['R{}'.format(line)].number_format = ws['R2'].number_format
        ws['S{}'.format(line)].number_format = ws['S2'].number_format
    
    # 使用pandas解析表格数据 取出所需数据(date = dpos[n-1]['日期'])进行计算
    df = pd.read_excel(file_path_1, 'Sheet1')
    dpos.update(df.to_dict(orient="index"))
    n = len(dpos)
    
    # 可以求得所需数据的索引
    # df[df['日期'] == '2018-10-10'].index[0]
    
    # 使用openpyxl解析表格  在最后插入当天的数据
    wb = openpyxl.load_workbook(file_path_1)
    ws = wb['Sheet1']
    # 在末尾添加一行数据
    ws.append([A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S])
    line = n+2
    style(line)
    wb.save(file_path_1)
    
    
    # 修改数据,直接修改即可
    # ws['A6'] = 'china'

     

     

    展开全文
  • Layui数据表格动态添加一行问题 Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。 笔者使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就数据表格...

    Layui数据表格动态添加一行问题

    Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。
    笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行。上述功能官方并没有给出实现,需要自己手动解决。

    解决思路及方案

    • 简单分析:根据需求——动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行样式及功能一样,就必须给tr设置和渲染出来的每一行一样的样式,利用jQuery去完成这个添加这样一个tr工程量实在太大了,因此需要换一种方案。

    • 数据表格中的原始数据:查看Layui官方文档,采用方法渲染或者自动渲染的方式去生成数据表格时,数据表格中的数据是通过直接赋值的方式或者异步加载的方式获得原始的数据。

      • 直接赋值方式原始的数据其实就是一个对象数组,如[{}, {}, {}, {}, …]
      • 异步加载方式原始的数据发请求从后端取,然后后端返回给前端的一个json对象,这里要求后端返回给前端的json对象要符合Layui数据表格能渲染的格式,Layui数据表格默认支持的后端返回给前端的json对象格式如下,各个属性具体描叙参照官方文档:
     {
         code: 0, 
         msg: "", 
         count: 1000, 
         data: [] 
     } 
    • 数据表格的重载:数据表格重载可以将新拿到的原始数据重新渲染到数据表格中,Layui提供的是方法是table.reload(ID, options)

      • ID:table的id属性值
      • options:为Layui数据表格的基础参数,具体参照官方文档
    • 下面给出针对原始数据是通过直接赋值的方式、采用方法渲染的数据表格动态添加一行的思路及解决方法

      • 思路:通过上述讲解,动态添加一行其实可以转换为:
        1. 拿到数据表格中的所有数据后,也就是拿到一个对象数组,在那个对象数组最后添加一个与拿到的对象数组中对象相同、但其所有属性的属性值为空的一个空对象。(那数据表格中所有数据可参照我的另一篇Layui数据表格之获取表格中所有的数据
        2. 利用table.reload(ID, options)方法将添加了一个“空对象”的数组重新加载渲染到数据表格即可。
        3. 跳转到动态添加行所在页,只要设置table.reload(ID, options)optionspage基础参数即可,将page参数的curr属性值设置为动态添加行所在页页码(页码根据数据表格每页显示的记录数以及添加了一行后数据表格中总的记录数自己算)即可。2、3步代码如下():
    //获取每页显示的记录数、当前记录总数,计算新添加的记录在第几页
    var totalRecord = tableContent.length;
    var pageSize = $(".layui-laypage-limits").find("select").val();
    if($.type(pageSize) == "string"){
        pageSize = parseInt(pageSize);
    }
    
    var currPageNo = Math.ceil(totalRecord / pageSize);
    console.log("每页显示的记录数:"+pageSize+"  类型:"+$.type(pageSize)+"   总的记录数:"+totalRecord+"  类型:"+$.type(totalRecord)
         +"   新增行所在页码:"+currPageNo+"  类型:"+$.type(currPageNo));
    
    // 重载表格并跳转到最后修改或者添加数据的那一页
    table.reload('viewTable', {
          page : {
             curr : currPageNo
          },
          data : tableContent
    });

    最终效果图:
    动态添加一行前(请将图片保存到本地查看大图)
    这里写图片描述

    动态添加一行后(请将图片保存到本地查看大图)
    这里写图片描述

    展开全文
  • vue控制表格点击就添加一行

    千次阅读 2020-03-23 09:31:01
    最近学习vue,此做了一个...而要vue控制表格,实现点击一个按钮就添加一行。只要往里面新插入数据即可了。 其中需要用v-for标签来循环输出 <tr v-for="(item,index) in add" :key="item.id"> <td>...

    最近在学习vue,在此做了一个记录。避免自己遗忘!!
    vue和jquery的操作理念是不一样的。vue的所有操作都是数据的更新、新增和删除。
    而要vue控制表格,实现点击一个按钮就添加一行。只要往里面新插入数据即可了。
    其中需要用v-for标签来循环输出

     <tr v-for="(item,index) in add" :key="item.id">
            <td><input type="text" name="langName[]" ref="langName" value=""  /></td>
            <td> <input type="text" name="langChar[]" ref="langChar"  value=""/></td>
            <td>
                <div class="add" @click="addL(add.length)" title="添加一行" style="cursor:pointer;">+</div>
            </td>
            </tr>
            <tr>
    

    然后在js里面设置数据,利用push标签往数据里面添加内容

    var test=new VUE({
    el:'#test',
    data:{
    add:[]
    },
    methods:{
    addL(i){
    this.add.push({})
    }
    }
    
    })
    
    

    这样就可以实现点击一下就实现添加一行了。

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • HTML我们可以通过添加TR标签添加行,窗体程序也一样我们就给Table添加Rows(); 下面是个简单的实例: 1、 先定义表格,定义好表头的和列以及绑定的值还有控件,我这里列定义了个删除按钮,设定好基本...
  • 生成word的时候模板中有动态添加表格行,模板如下图: 下面先上结果图: 模板上的标签变量解析是自己写的。开始想着用freemark做模板解析,但是freemark生成的word文档,无法用poi转化为pdf文档,最后放弃了...
  • jq实现表格的新增一行和删除一行 代码如下图: <table id="dynamicTable" class="dynamicTable" width="100%" border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <td ...
  • el-table中的每列显示的是数字,需要在表格的最下面一行添加汇总行,计算每列的总和。 el-table自带是否显示汇总行这个属性。 注: 博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 ...
  • javascript 动态添加表格行  原文地址:http://zengxiangshun.iteye.com/blog/1121779 动态添加表格行  表格部分代码如下:  第一行 第二行 第三行 ...//添加一行 var ne
  • 如何word原有表格的基础上一行的后面插入多行 我WORD中插入了一个30行的表格,但操作后才发现这点行数远远不够,需要表中的某些行后和表末尾插入苦干行,如果一行一行的插很慢,想知道如何一次插入多行的...
  • js获取表格动态添加行的数据

    千次阅读 2018-08-30 10:30:19
    问题:动态添加table所定义的id值重复问题 解决思路:定义name代替定义id,循环遍历行数组拿取每数据 &lt;table id="table"&gt;  &lt;tr&gt;&lt;input name="name1"...
  • 动态添加表格行

    2006-06-20 14:59:00
    动态添加表格行 文/Ray 表格部分代码如下:testTbl" border=1>tr1">box1">第一行tr2">box2">第二行box3">第三行动态添加表行的javascript函数如下:function addRow(){//添加一行var newTr = testTbl.insertRow
  • 往往会遇到这样的情况,就是要实现table表格中,点击其中一行或者某一列跳转到下个页面,然后将这一条的相关数据带到下个页面中显示,无论点其中一行或者某一列都是跳到相同的页面,只是填的数据不一样,这个时候...
  • javascript动态添加表格行

    千次阅读 2006-08-09 08:49:00
    动态添加表格行 文/Ray 表格部分代码如下:testTbl" border=1>tr1">box1">第一行tr2">box2">第二行box3">第三行动态添加表行的javascript函数如下:function addRow(){//添加一行var newTr = testTbl.insertRow
  • 使用POI给word中的表格增加行

    万次阅读 热门讨论 2017-08-03 17:32:29
    现在根据数据为表格增加行,并保留表格线条。 如下表格所示: 字段1 字段2 字段3 字段4 字段5 字段6 修改后的效果: 字段1 字段2 字段3 字段4 字段5 字段6 ... ... ... ... ... ... ... ..
  • JavaScriptt 增加表格一行
  • Html中的表格添加与删除

    千次阅读 2019-03-30 11:13:55
    添加或删除元素 开发工具与关键技术:vs2017,jQuery 作者:许建诚 撰写时间:2019/3/30 表格(table)有三个部分:thead;...一般我们添加与删除的...这里提提:append()是插入内容到被选元素里的结尾处;...
  • JS动态添加表格行

    千次阅读 2007-03-27 09:29:00
    表格部分代码如下:testTbl" border=1>tr1">box1">第一行tr2">box2">第二行box3">第三行动态添加表行的javascript函数如下:function addRow(){//添加一行var newTr = testTbl.insertRow();//添加两列var newT
  • 若是简单调整行距,则可以插入表格添加一行这样的命令: \renewcommand\arraystretch{1.5} 或 \linespread{1.5} 若更加精细调整,各行间距可能不一样,之前网上搜索,一直没有找到 latex 中控制...
  • !... ... ... <td style="width: 32%"><input ...我想知道 jq 怎么给他增加一行一样的 点这个加号可以一直加 然后新增的行末尾是减号,点减号可以减掉当前行, 这样怎么给新增的行 初始化 id 和name 还有怎么提交到后台
  • 2,点击每一行之后。要跳转之前。加一个判断。isClick为true就不跳转。 关键代码: 完整代码: 我创建的试卷列表:包含了所有做过和没有做过的试卷MyExam 开始考试 删除试卷 ...
  • html如何给表格中的行添加链接

    千次阅读 2019-05-29 10:38:20
    如果你只是想给表格中的行添加链接, 推荐你去看这个: 如何给Table/Tr/Td添加超链接? 而如果你用django框架, 并且想链接中使用模板标签{% url 'urlpath' %}, 那么该文或许会对你有用 这里我使用的是Bootstrap上面...
  • 通过innerHTML动态添加表格行

    千次阅读 2009-03-10 13:19:00
    表格部分代码如下:testTbl" border=1>tr1">box1">第一行tr2">box2">第二行box3">第三行动态添加表行的javascript函数如下:function addRow(){//添加一行var newTr = testTbl.insertRow();//添加两列var ne
  • 当然,也有部分客户吐槽新版本为什么只能创建20数据。新版本真的只能创建20数据吗?下面小编就为大家介绍一下新版超级表格移动端的使用方法,并为大家找到神秘消失的第21数据。​如何微信中使用新版超级...
  • 添加行、删除、插入、删除多行、右键删除、修改单元格内容
  • jq实现表格自动增

    2015-12-16 13:49:50
    在添加数据的时候又是只录入条数据,有时录入多条,所以为了方便使用,增加表格行的自动增加功能,实现如下: 说明(" $j " 为jquery中" $ "的重定义函数,效果一样表格行: 新增表格行实现:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 125,303
精华内容 50,121
关键字:

如何在表格增加一行格式一样