关于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. Linux第六节随笔 输入输出重定向 、管道、通配符、wc / grep / tr / sort / cut / which /whereis /locate /find /

    三期第五讲 -高级文件管理1.输入输出重定向 ls -l /dev/stdin -> /proc/self/fd/0 标准输入 设备:键盘 标记:0 ls -l /dev/stdout -> ...

  2. 基于telegraf+influxdb+grafana进行postgresql数据库监控

    前言 随着公司postgresql数据库被广泛应用,尤其是最近多个项目在做性能测试的时候都是基于postgresql的数据库,为了确定性能瓶颈是否会出现在数据库中,数据库监控也被我推上了日程.在网上找 ...

  3. Visual Representation of SQL Joins

    原文:http://www.codeproject.com/Articles/33052/Visual-Representation-of-SQL-Joins   从视图上介绍了7种不同类型的JOIN ...

  4. ThreadLocal 线程本地变量 及 源码分析

    ■ ThreadLocal 定义 ThreadLocal通过为每个线程提供一个独立的变量副本解决了变量并发访问的冲突问题 当使用ThreadLocal维护变量时,ThreadLocal为每个使用该变量 ...

  5. 几种加密算法的java实现包括MD5、RSA、SHA256

    SHA加密: package com; import java.security.MessageDigest;import java.security.NoSuchAlgorithmException ...

  6. C# DataTable抽取Distinct数据（不重复数据）

    http://blog.csdn.net/jyh_jack/article/details/17959821 DataTable dataTable; DataView dataView = data ...

  7. asp.net core webapi 服务端配置跨域

    在前后端分离开发中服务端仅仅只为前端提供api接口,并且前后端往往单独部署,此时就会出现浏览器跨域问题.asp.net core提供了简单优雅的解决方案. 在startup文件的Configure添加 ...

  8. python科学计算_numpy_ufunc

    ufunc简介 ufunc指universal function,是一种能够对数组中的所有元素进行操作的函数,ufunc是针对数组进行操作的函数,对一个数组进行重复的运算时,使用ufunc比math库 ...

  9. ［转］Linux网络配置命令ifconfig输出信息解析

    eth0      Link encap:Ethernet  HWaddr 00:1e:4f:e9:c2:84 inet addr:128.224.163.153  Bcast:128.224.163 ...

  10. html5 storage事件

    HTML5 虽然很多年了,但是真的了解不不够不够.主题说的是 storage时间,说起对 storage 事件的了解还是从 QQ音乐 说起. QQ音乐的主页是 https://y.qq.com , 而 ...