精华内容
下载资源
问答
  • js表格最后添加一行

    千次阅读 2014-03-03 16:58:22
    在表格最后加入一行 三种方法 方法一: jquery: function add_cg(c) { var str = ''; str += ""; str += "" + (c+1) + "  "; str += ""; str += ""; //$("#cg_title_list
    <table id="cg_title_list">
    <tr class="add_cg">
        <td style="font-size:18px; font-weight:bold;" class="cg_index">1&nbsp;&nbsp;</td>
        <td><textarea style="height:35px; width:560px;" name="CgWeek[cg_title][]"></textarea></td>
        <td><input type="button" class="put-but" οnclick="add_cg(document.getElementsByClassName('add_cg').length);" value="增加" style="padding:0; margin:0 0 0 10px;" /></td>
    </tr>
    </table>
    在表格最后加入一行 <tr>三种方法


    方法一:


    jquery:
    function add_cg(c) {
    var str = '';
    str += "<tr class='add_cg'>";
    str += "<td style='font-size:18px; font-weight:bold;' class='cg_index'>" + (c+1) + "&nbsp;&nbsp;</td>";
    str += "<td><textarea style='height:35px; width:560px;' name='CgWeek[cg_title][]'></textarea></td><td></td>";
    str += "</tr>";
    //$("#cg_title_list").append(str);
    }


    方法二:
    javascript:insertRow insertCell
    function add_cg(c) {
    var parent = document.getElementById("cg_title_list");
    var newrow = parent.insertRow(-1);
    var newcol1 = newrow.insertCell(-1);
    var newcol2 = newrow.insertCell(-1);
    var newcol3 = newrow.insertCell(-1);
    var newtextarea = document.createElement("textarea");
    newcol2.appendChild(newtextarea);
    newcol1.innerHTML = (c+1)+"&nbsp;&nbsp;";
    //设置textarea属性
    newtextarea.setAttribute('style','height:35px; width:560px;');
    newtextarea.setAttribute('name','CgWeek[cg_title][]');
    //设置索引td属性
    newcol1.setAttribute('style','font-size:18px; font-weight:bold;');
    newtextarea.setAttribute('class','cg_index');
    //设置行属性
    newrow.setAttribute('class','add_cg');
    }
    方法三:
    javascript insertRow+innerHTML


    function add_cg(c) {
    var newrow = parent.insertRow(-1);
    newrow.setAttribute('class','add_cg');
    newrow.innerHTML = "<td style='font-size:18px; font-weight:bold;' class='cg_index'>" + (c+1) + "&nbsp;&nbsp;</td>";
    newrow.innerHTML += "<td><textarea style='height:35px; width:560px;' name='CgWeek[cg_title][]'></textarea></td><td></td>";
    }
    展开全文
  • //添加新一行 //第一个参数是新增行的样式,在原表中取XWPFTableRow header = table.getRow(1); //第二个参数是表示插入到第几行 table.addRow(header,h); } List<XWPFTableRow> rows = ...
  • alert("请选中一行") } } <!--可编辑表格--> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>增加 ()"> ...
  • 笔者使用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
    });

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

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

    展开全文
  • Java向word表格添加新行并赋值

    千次阅读 2019-02-22 09:56:39
    但这是不够的,对于一些OA项目,则需要在线打开word文档并通过后台的设置将数据添加到word表格中,甚至对表格进行添加新行的操作。这需要开发者具备将activex控件集成到Java环境的能力。对于大部分Java开发工程师来...

    前言:

    相信大家都有过操作word文档表格的经历,对于每行数据的记录与操作是比较方便的。但这是不够的,对于一些OA项目,则需要在线打开word文档并通过后台的设置将数据添加到word表格中,甚至对表格进行添加新行的操作。这需要开发者具备将activex控件集成到Java环境的能力。对于大部分Java开发工程师来说,仅仅解决自己项目中的需求就要掌握activex控件,未免学习成本太大。

    所以我们今天就要介绍一个中间件技术——pageoffice,此中间件技术已经将 在web系统操作office文档的大部分功能整合完毕,大家只需要关注自己web系统的业务逻辑即可,学习成本低,且功能很丰富。下面我们来实战用pageoffice实现一下用Java语言在线打开word文档的同时,向word表格中添加新行并赋值的功能。

    先看效果:

    此为原始文档

    下面是经过pageoffice后台设置后页面打开的文档

    可以看到文档表格由原来的三行增加到了5行,并且通过后台向相应的单元格中添加了相应的数据。

     

     部署步骤(只需4步)

    1.官网http://www.zhuozhengsoft.com/dowm/下载集成文件,引入jar包,配置web.xml

    去刚才下载的集成文件中找到lib,将里面的内容放在项目web-inf的lib中引入jar包,然后将web.xml的pageoffice配置引入到自己项目的wb.xml中

    2.在父页面aaa.jsp(需要打开文档的页面)放一个a标签或者button

    写a标签之前先引入pageoffice需要的js文件

    <script type="text/javascript" src="/jquery.min.js"></script>
    <script type="text/javascript" src="/pageoffice.js" id="po_js_main"></script>

    然后添加a标签 

    <a href="javascript:POBrowser.openWindowModeless('WordTable.jsp' , 'width=1200px;height=800px;');">向Word文档中的Table插入新行并赋值</a>

    3.在父页面同级目录下创建一个名为WordTable.jsp的文件

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%@ page
    	import="com.zhuozhengsoft.pageoffice.*,com.zhuozhengsoft.pageoffice.wordwriter.*"%>
    <%
    	PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
    	WordDocument doc = new WordDocument();
    	Table table1 = doc.openDataRegion("PO_T001").openTable(1);
     
        table1.openCellRC(1,1).setValue("PageOffice组件");
    	int dataRowCount = 5;//需要插入数据的行数
    	int oldRowCount = 3;//表格中原有的行数
    	// 扩充表格
        for (int j = 0; j < dataRowCount - oldRowCount; j++)
        {
            table1.insertRowAfter(table1.openCellRC(2, 5));  //在第2行的最后一个单元格下插入新行
        }
    	// 填充数据
        int i = 1;
        while (i <= dataRowCount)
        {   
            table1.openCellRC(i, 2).setValue("AA" + String.valueOf(i));
            table1.openCellRC(i, 3).setValue("BB" + String.valueOf(i));
            table1.openCellRC(i, 4).setValue("CC" + String.valueOf(i));
            table1.openCellRC(i, 5).setValue("DD" + String.valueOf(i));
            i++;
        }
    	poCtrl.setWriter(doc);
    	poCtrl.setServerPage(request.getContextPath()+"/poserver.zz");
    	poCtrl.webOpen("test.doc", OpenModeType.docNormalEdit,"张佚名");
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head>
    
    		<title>Word中的Table的数据填充</title>
    		<meta http-equiv="pragma" content="no-cache">
    		<meta http-equiv="cache-control" content="no-cache">
    		<meta http-equiv="expires" content="0">
    		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    		<meta http-equiv="description" content="This is my page">
    
    	</head>
    
    	<body>
    		<div style="width: auto; height: 750px;">
    		<%=poCtrl.getHtmlCode("PageOfficeCtrl1")%>
    		</div>
    	</body>
    </html>
    

    4.新建文件

    新建一个名为test.doc的word文件(如果新建的是docx文件就将第三步的poCtrl.webOpen("test.doc", OpenModeType.docNormalEdit,"张佚名");代码改为poCtrl.webOpen("test.docx", OpenModeType.docNormalEdit,"张佚名");

    将新建的test.doc文件放在WordTable.jsp同级目录下

    本地打开test.doc文件,创建一个3行5列的表格,然后点击表格左上角的全选标志选中整个表格。

    在整个表格选中的情况下,点击菜单栏插入-书签--书签名设置为PO_T001--点击添加。

    然后启动项目直接访问aaa.jsp点击链接.此时会提示安装插件,点击安装成功后提示注册,填写相关信息,填写注册码Q37LN-W8NI-KFSQ-LEY3Y就可以打开文档.

    注意:如果需要更丰富的功能,大家可以去pageoffice官网下载示例代码直接将samples4文件夹扔到Tomcat的webapps下,启动Tomcat,浏览器访问http://localhost:8080/Samples4/index.html,查看示例中的下面一个链接,直接看samples4文件夹下WordTable文件夹里面的代码.

     

    刚开始接触pageoffice的话,也可以看视频快速上手http://www.zhuozhengsoft.com/Technical/

    如有侵权,请联系博主

    展开全文
  • thinkphp 删除表格最后一行

    千次阅读 2014-11-14 11:30:00
    问题描述: ...这里贴出完整代码,添加表格行及删除表格最后一行。 $(document).ready(function() { var row=1; //用来标识当前行数 $("#add").click(function(){//表格行html var lin

    问题描述:

    接上篇动态添加表格,既然有添加,必然有删除。动态添加表格显得有点不合理,应该只添加表格行,而不是添加新的表格。

    这里贴出完整代码,添加表格新行及删除表格最后一行。

    <html>
    
    <script src="__PUBLIC__/js/jquery.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
    
    	 var row=1; //用来标识当前行数
    
     $("#add").click(function(){//新表格行html
     var line="<tr><td>选项</td><td><input id='op[]'name= 'option["+row+"]' type='text' /></td><td>性别</td><td><input name='sex["+row+"]' type='text' /></td><td>学院</td><td><input name='school["+row+"]' type='text' /></td><td>头像</td><td><input name='thumb["+row+"]' type='file' /></td><td><button type='button' name='btn' value='del["+row+"]' οnclick='deltr()'>删除</button></td></tr>";
    
      
      $("#row").val(row);
    
      row=row+1;
    
    
    });
    
    });
    
    function deltr(){
    var trs = document.getElementById('list').getElementsByTagName('tr');
     $('#list tr:last-child').remove();//删除最后一行
    
    
    }
    
    
    </script>
    	
    
    <body >
    
    <div id="a"></div>
    
    <form name="vote" method="post" action="__URL__/add_vote"  enctype="multipart/form-data">
    <lable><h1>投票名称 <input name="votename" type="text" /></h1> </lable>
    <input id="row" name="row" type="hidden" vaule=""/>
    
    <table id='list'>
    	
    
    </table>
    </div>
    <div>
    <input id="add" type="button" value="增加一行" />
    	 
    <input id="" type="submit" value="提交" /></td>
    </div>
    
    </form>
    
    
    </body>
    
    </html>
    


    展开全文
  • id="names" name="names"> 数量:</label><input type="text" id="num" name="num"> 单价:</label><input type="text" id="price" name="price"> 添加</button> <hr> <script> var bn,inputs,table,...
  • js动态给表格添加一行、删除一行

    千次阅读 2018-10-30 15:11:06
    最近写代码遇到这个需求,特地总结了一下写了个demo,如下所示: 代码: ... // 鼠标移动改变背景,... 添加一行" onclick="add()" /> 添加按钮上添加点击事件 预览效果: 欢迎借鉴和交流^v^~
  • 这几天基于react写了一个小demo测试,主要实现的功能是:输入框中输入文字,点击添加按钮,下方的表格中会自动添加一行数据,点击删除按钮后,该行数据被删除。  先来看看最后的效果图:  操作前  操作...
  • 例如:身高那一行下方想加一个 胸围 100cm ,就点击“下方添加行” 于是下方出现一行空行 实现过程 一、纵向表格部分 java后端——备好数据的过程 注意事项 以上前端代码主体是谁?假设是 form (spri...
  • 【教程】layui动态表格添加新行

    千次阅读 2019-03-22 13:37:13
    【场景】页面调用数据表格工具栏提供添加按钮,点击添加按钮,页面弹出层,层内添加新内容,点击保存按钮,添加到数据库后,数据表格中新增一行【解决方案】1设置数据表格实例时添加id属性table.render({ ...
  • 我想easyui表格最后一添加滑动开关按钮,但是运行效果是变成了input框,![图片说明](https://img-ask.csdn.net/upload/201807/19/1531994465_763991.jpg),下面是我的代码截图![图片说明]...
  • 效果图: 实现: <el-button @click="addziduan">添加字段</el-button> 表格原本绑定的数据 prototypes:[ ... describe: '设备类型字段,不可修改', ... // 向表格数组中数据添加一行 this.prototypes.pu
  • 表格html         名称测量范围不确定度证书编号有效期
  • JS实现表格添加,删除一行

    万次阅读 2018-08-13 10:26:36
    "添加行" onclick = "addtr()" > < table border = "1" id = "tid" > < tr > < td > 用户编号 td > < td > 用户姓名 td > < td > 操作 td > tr > < tr > < td > 1 td > < td...
  • 表格一行不能删除! " ); return false ; }  //$("table tr:not(:first):last").remove(); }); }); script > head > < body > < table > < tr > < td > td > < td > td > < td > ...
  • 行最后一列添加一个删除按钮。点击删除按钮、删除本行! 思路:先一点一点添加功能,先写添加表格写删除表格 行数: 列数: var row = document.getElementById("textRowId"); var col =...
  • -------------------------------html部分--------------------------      第一行      1       追加 减少 -------------------------------jQ
  • 1.列属性中加入事件 { title:'数据量序号', field:'sjid' // hidden:true },{ field: 'operate',
  • el-table中的每列显示的是数字,需要在表格的最下面一行添加汇总行,计算每列的总和。 el-table自带是否显示汇总行这个属性。 注: 博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 ...
  • 生成word的时候模板中有动态添加表格行,模板如下图: 下面先上结果图: 模板上的标签变量解析是自己写的。开始想着用freemark做模板解析,但是freemark生成的word文档,无法用poi转化为pdf文档,最后放弃了...
  • #!/usr/bin/python # -*- coding: UTF-8 -*- # 打开一个文件 fo = open("foo.txt", ... # 写入 \n 表示换行 一行一行的写入 fo1 = open("foo.txt", "r+") #打开一个文件用于读写。文件指针将会放在文件的开头。 str =
  • js实现添加删除表格一行

    千次阅读 2009-08-18 08:46:00
    表格添加删除一行的方法网上也有比较多的例子,今天把我做的也拿出来给大家分享一下,用的是jquery的方法非常简单://记录行数var areaCount=1;//删除链接模板htmlvar delRowTemplete = "删除";var ...
  • powerpoint 2016表格添加行

    万次阅读 2017-06-15 10:39:13
    powerpoint 表格 插入 删除
  • python文件最后一行添加

    千次阅读 2019-11-01 08:38:07
    with open("D:\\test.txt", encoding="utf-8",mode="a") as file: ...mode=“a”,追加模式,会文件末尾添加数据。 函数调用文件时需要每个函数中都打开关闭文件,而不是打开次,都可以用! ...
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档//每一行的索引var index = 3;function btnAddRow(){ //创建行的id var rId = "tr" + index; //随机数 ...
  • 效果: :原始页面
  • html表格新增一行和删除一行

    千次阅读 2019-01-21 10:17:01
    主要思路:现在页面中写段你想要的html代码样式,然后设置为隐藏不可见(style="display: none").然后js中获取该段代码,做处理后重写回html中   &lt;!DOCTYPE html&gt; &lt;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 107,993
精华内容 43,197
关键字:

在表格的最后添加新的一行