关于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控制图片自动缩放，实现铺满盒子，不变形，完全局中

    此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...

  2. 【ASP.NET Core】运行原理(4):授权

    本系列将分析ASP.NET Core运行原理 [ASP.NET Core]运行原理(1):创建WebHost [ASP.NET Core]运行原理(2):启动WebHost [ASP.NET Core ...

  3. C# .net中json字符串和对象之间的转化方法

    http://blog.csdn.net/xuexiaodong009/article/details/46998069 json作为作为一种最常用的数据,应用很广泛,在.net中如何把一个对象转化为 ...

  4. 讲述Sagit.Framework解决：双向引用导致的IOS内存泄漏（中）- IOS不为人知的Bug

    前言: 话说昨晚还是前晚,写了一篇:讲述Sagit.Framework解决:双向引用导致的IOS内存泄漏(上) 文章写到最后时,多了很多莫名奇妙的问题!!! 为了解决了这些莫名奇妙的问题,我又战斗了2 ...

  5. 淘宝NPM源的使用

    npm作为国外的node仓库安装工具,自然会受到我大长城防火墙的干扰,国内用户在安装相关的资源的时候,会出现安装失败,以及速度很慢的情况.为了解决npm安装的问题,国内出现了很多npm的镜像网址,ta ...

  6. Effective Java 第三版——18. 组合优于继承

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  7. 常用的linux系统监控命令

    记录一下自己常用的linux系统命令,方便以后查阅,发觉记忆越来越不行了 找到最耗CPU的java线程 ps命令 命令:ps -mp pid -o THREAD,tid,time   或者  ps - ...

  8. DAY4-打卡第四天-2018-1-12

    刚经历C语言考试,提前一个小时交卷出来在学一点咯!! 字符串不是一个基本类型,不能用恒等== 而应该用: 变量名.equals(""); 变量名.equalsIgnoreCase( ...

  9. 浅谈Android的广告欢迎界面(倒计时)

    前些时候就是别人问我他的android APP怎么做一个广告的欢迎界面,就是过几秒后自动跳转到主界面的实现. 也就是下面这种类似的效果.要插什么广告的话你就换张图吧. 那么我就思考了下,就用了andr ...

  10. [已解决]IndentationError: unindent does not match any outer indentation level

    最近跟同事合作代码没有用git进行协同,很多代码拷贝后进行粘贴,常常报以上错误. 经过查询发现是空格跟tab混合使用了,重新将代码的缩进手动调整下就好了.