关于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. 通过js添加的元素点击事件无法触发

    var blk_have ='<div class="sw-off"></div>'; $('#blk').prepend(blk_have); $(doc ...

  2. 云计算---openstack镜像制作详解

    一:本地部署KVM 1.安装KVM 1.1安装须知 查看CPU是否支持kvm完全虚拟机. [root@LINUX ~]# grep "flags" /proc/cpuinfofla ...

  3. java sql

    import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import ja ...

  4. 有关opacity或RGBA设置颜色值及元素的透明值

    opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化   opacity声明来 ...

  5. Sql Server 里的向上取整、向下取整、四舍五入取整的实例！

    http://blog.csdn.net/dxnn520/article/details/8454132 =============================================== ...

  6. thinkinginjava学习笔记09_内部类

    定义与创建 将一个类定义放在另一个类.方法.作用域.匿名类等地方,就是内部类:内部类只能由外部类对象创建(通过外部方法或者.new方法),内部类对象创建时必须已经有一个外部类对象,并且与之连接(在内部 ...

  7. 关于linux命令ssh的总结

    因为项目计算量比较大,需要将任务分布到多台电脑上面运行,因为对于分布式概念不熟,就想到了linux最简单的ssh协议,远程控制其他电脑,然后写shell脚本统一在所有电脑上运行程序.(我的操作系统为U ...

  8. python编辑器pydev安装

    pydev实际上时eclipse的插件 1.安装eclipse(1)eclipse不需要安装,解压文件夹,点击eclipse.exe可使用 2.安装pydev (1) 解压pydev可看到featur ...

  9. Python入门-数据类型之字符串

    字符串详解 没那么多废话,直接介绍字符串使用.继续往下看~~~ 字符串定义: *1.引号包围,不可变(指的是不可以对字符串进行修改)得序列(凡是能够通过索引取值的都是序列). *2.不可变对象(字符串 ...

  10. Nodejs(pkg方式安装)卸载 及命令行模式的重新安装

    直接在terminal下运行以卸载node和nvm: sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,shar ...