关于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. CPP--正码，反码，补码~附整数溢出的探讨

    之前说到了long的争议(http://www.cnblogs.com/dotnetcrazy/p/8059210.html),这边就不用long来举例了,用int吧 可以看一下这篇文章(http:/ ...

  2. template package (godoc 翻译)

    template 包 概述(Overview) template 包实现了数据驱动模板用于生成文本输出. 要生成HTML输出,请参阅html/template包,它具有与此包相同的接口,但会自动保护H ...

  3. 修改placeholder的样式

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } input:-moz-pl ...

  4. iOS学习——iOS 整体框架及类继承框架图

    整理自:IOS 整体框架类图值得收藏 一 整体框架 在iOS开发过程中,对iOS的整理框架的了解和学习是必不可少的一个环节,今天我们就好好来了解一下iOS的整体框架.首先贴一个关于iOS的框架介绍:i ...

  5. .Net IOC框架入门之二 CastleWindsor

    一.简介 Castle是.net平台上的一个开源项目,为企业级开发和WEB应用程序开发提供完整的服务,用于提供IOC的解决方案.IOC被称为控制反转或者依赖注入(Dependency Injectio ...

  6. Fiddler如何模拟弱网环境进行测试

    1.模拟弱网环境 打开Fiddler,Rules->Performance->勾选 Simulate Modem Speeds,勾选之后访问网站会发现网络慢了很多 2.Fiddler弱网的 ...

  7. Python新式类与经典类的区别

    1.新式类与经典类 在Python 2及以前的版本中,由任意内置类型派生出的类(只要一个内置类型位于类树的某个位置),都属于“新式类”,都会获得所有“新式类”的特性:反之,即不由任意内置类型派生出的类 ...

  8. 关于Python的函数(Method)与方法(Function)

    先上结论: 函数(function)是Python中一个可调用对象(callable), 方法(method)是一种特殊的函数. 一个可调用对象是方法和函数,和这个对象无关,仅和这个对象是否与类或实例 ...

  9. ASP.NET MVC 设置区域默认定向

    public override void RegisterArea(AreaRegistrationContext context) { context.MapRoute( "m_defau ...

  10. jquery tips简易使用方法 新手必看

    使用jquery1.12.4以上版本 使用jquery插件 tips .beg-pull-right 点击时的选择器 在这里写的是一个类选择器   记得引入jquery $(".beg-pu ...