关于js对表格进行逐行添加，今天抽空整理了一下：新建一个html文件（没有编辑器的可以新建一个demo.txt文件，然后改后缀名为demo.html），把下面代码全部贴进去即可。
功能包括：表格添加一行，表格删除一行，表格遍历取值等。

点击说明：点击添加按钮，则表格添加一行，可进行录入，删除按钮，可删除当前行，其他行不影响。删除或者添加，每行的的编号都会自动变化，套餐和价格是<input/>，内容是

<textarea></textarea>,点击保存按钮的时候，遍历表格中所有行，把所有行的数据取出来弹框弹出展示，后期可根据需求传递到后台进行处理。

效果图：

源代码：

<!--

    Creator： WangPeng

    CreateTime : 2018-01-25

    去年今日此门中，人面桃花相映红。

    人面不知何处去，桃花依旧笑春风。

-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动态增加表格</title>

</head>

<style>

    td /*设置表格文字左右和上下居中对齐*/

    {

        vertical-align: middle;

        text-align: center;

        padding: 9px;

    }

    textarea{

        min-height: 60px;

        min-width: 200px;

    }

</style>

<script type="text/javascript">

    function del(obj){

        if(document.getElementById('tbodyid').children.length>1){

        var trid=obj.parentNode.parentNode.id;

        var objtr=document.getElementById(trid);

        document.getElementById('tbodyid').removeChild(objtr);

        var tbody=document.getElementById('tbodyid');

        var countchildren=tbody.childElementCount;

        for (var i=0;i<countchildren;i++){

            tbody.children[i].children[0].innerHTML=i+1;

        }

        }

        else{

            alert("请不要全部删除");

        }

    }

    function add(){

    var trid = new Date().getTime();

    var packageid=trid+'packageid';

    var countid=trid+'countid';

    var priceid=trid+'priceid';

    var objtr=document.createElement('tr');

    objtr.id=trid;

    objtr.innerHTML="<td></td> " +

        "            <td><input id='"+trid+"packageid'></td> " +

        "            <td><textarea id='"+trid+"countid'></textarea></td> " +

        "            <td><input id='"+trid+"priceid'></td> " +

        "            <td><button type='button' onclick='del(this)'>删除</button></td>";

        document.getElementById("tbodyid").appendChild(objtr);

        var tbodyobj=document.getElementById('tbodyid');

        var countchildren=tbodyobj.childElementCount;

        for (var i=0;i<countchildren;i++){

            tbodyobj.children[i].children[0].innerHTML=i+1;

        }

    }

    function save(){

        var tbodyobj=document.getElementById('tbodyid');

        var countchildren=tbodyobj.childElementCount;

        var trid="";

        var packageid="";

        var countid="";

        var priceid="";

        var list=new Array();

        for (var i=0;i<countchildren;i++){

            trid=tbodyobj.children[i].id;

            packageid=trid+"packageid";

            countid=trid+"countid";

            priceid=trid+"priceid";

            var map={

            "套餐":document.getElementById(packageid).value,

            "内容":document.getElementById(countid).value,

            "价格":document.getElementById(priceid).value

            }

            list.push(map);

        }

        console.log("list:",list);

        alert(JSON.stringify(list));

    }

</script>

<body>

<div>

    <div style="width: 80%;margin: 10%">

    <table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" align="center" width="100%">

        <caption>动态增加表格</caption>

        <thead>

        <tr>

            <th width="5% ">序号</th>

            <th width="20%">套餐</th>

            <th width="30%">内容</th>

            <th width="10%">价格</th>

            <th width="10%">操作</th>

        </tr>

        </thead>

        <tbody id="tbodyid">

        <tr id="123">

            <td>1</td>

            <td><input id="123packageid"></td>

            <td><textarea id="123countid"></textarea></td>

            <td><input id="123priceid"></td>

            <td><button type="button" onclick='del(this)'>删除</button></td>

        </tr>

        </tbody>

    </table>

        <button type="button" onclick='add()'>添加</button>

        <button type="button" onclick='save()'>保存</button>

</div>

</div>

</body>

</html>

js动态生成其他的也同理，可根据自己需要在指定位置创建自己所需要的元素。

js动态添加-表格逐行添加、删除、遍历取值的更多相关文章

  1. js如何实现动态在表格中添加标题和去掉标题？

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  2. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  3. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  4. js 动态生成表格案例

    <1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th),   下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...

  5. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  6. js 定义像java一样的map方便取值【转】

    js 定义像java一样的map方便取值.  百度有位大神说"js对象本身就是一种Map结构",这真是一段让人欢天喜地的代码. <script> //定义一个全局map ...

  7. Oracle存储过程-自定义数据类型,集合,遍历取值

    摘要 Oracle存储过程,自定义数据类型,集合,遍历取值 目录[-] 0.前言 1.Packages 2.Packages bodies 3.输出结果 0.前言 在Oracle的存储过程中,可能会遇 ...

  8. jQuery循环遍历取值

    1:循环遍历取值 var arr = new Array(); $(".plus-tag a span").each(function(i) { arr[i] = $(this). ...

  9. Map 遍历取值及jstl的取值

    Map 遍历取值及jstl的取值 学习了:http://blog.csdn.net/yanjiaye520/article/details/17354239 1.Java map的便利取值 Java代 ...

随机推荐

  1. ln 命令详解

    ln 命令 作用:它的功能是为某一个文件在另外一个位置建立一个同步的链接 参数:必要参数:  -b 删除,覆盖以前建立的链接  -d 允许超级用户制作目录的硬链接  -f 强制执行  -i 交互模式, ...

  2. uEditor富文本编辑器

    在配合vue和webpack使用时,在严格模式下注意会报错,需要修改配置. 我采用的方式:----不建议全部取消严格模式,因为一些插件必须要再严格模式才能运行的 对UEditor的严格模式报错文件,取 ...

  3. (转)Linux安装Tomcat

    为了学习java,需要一个服务器,因此决定用比较流行的tomcat.根据网上对安装tomcat的介绍,自己进行了安装,现在已经成功了,现在把安装的过程进行记录,也供大家学习参考.   一.从官方网站上 ...

  4. 《深入理解java虚拟机》 - 需要一本书来融汇贯通你的经验（下）

    上一章讲到了类的加载机制,主要有传统派的 双亲委派模型 和 现代主义激进派的 osgi 类加载器.接下来继续. 第8章 虚拟机字节码执行引擎 局部变量表,用于存储方法参数和方法内部定义的局部变量. 操 ...

  5. Python并发实践_02_通过yield实现协程

    python中实现并发的方式有很多种,通过多进程并发可以真正利用多核资源,而多线程并发则实现了进程内资源的共享,然而Python中由于GIL的存在,多线程是没有办法真正实现多核资源的. 对于计算密集型 ...

  6. git上传文件到github

     一.git之上传代码到github. 安装git,这个就不说了,很多帖子都有详细说明.  二.新建仓库,GitHub上的,首先申请账号.  三.本地选择地方新建本地仓库. 建完本地仓库文件夹,在本地 ...

  7. easyHOOK socket send recv

    代码比较简单,就不做注释了.  包含一个sockethookinject.DLL 和sockethook.exe 有一点不清楚, SetExclusiveACL可以添加当前线程的hook, 但是eas ...

  8. 简易 (I/O)版本通讯录

    #include <stdio.h> #include<assert.h> //#include<malloc.h> #include<string.h> ...

  9. mysql导入数据load data infile用法整理

    有时候我们需要将大量数据批量写入数据库,直接使用程序语言和Sql写入往往很耗时间,其中有一种方案就是使用MySql Load data infile导入文件的形式导入数据,这样可大大缩短数据导入时间. ...

  10. js 移动端写搜索时怎么调用软键盘上面的搜索按钮

    这段时间一直在做移动端,所以遇到很多问题,现在很多网站在做移动端搜索的时候都不会在后面加一个搜索按钮,而是直接调用输入法上面的搜索搜索按钮进行搜索 input的一个新属性给我们提供非常方便的书写, 就 ...