基于网上代码修改实现动态添加表数据行

<!DOCTYPE html>

<html lang="cn">

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        body,html{

            padding: 0;

            margin: 0;

            font-size: 14px;

            color: #000000;

        }

        table{

            border-collapse: collapse;

            width: 100%;

            table-layout: fixed;

        }

        thead{

            background: #3d444c;

            color: #ffffff;

        }

        td,th{

            border: 1px solid #e1e1e1;

            padding: 0;

            height: 30px;

            line-height: 30px;

            text-align: center;

        }

        .hide{

            display:none;

        }

        .dialog-tip{

            width:300px;

            height:200px;

            border:1px solid #aaaaaa;

        }

    </style>

</head>

<body>

<table id="jsTrolley">

    <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>

    <tbody>

    <tr><td>产品1</td><td>10.00</td><td><a href="javascript:void(0);">删除</a></td></tr>

    <tr><td>产品2</td><td>30.20</td><td><a href="javascript:void(0);">删除</a></td></tr>

    <tr><td>产品3</td><td>20.50</td><td><a href="javascript:void(0);">删除</a></td></tr>

    </tbody>

    <tfoot><tr><th>总计</th><td colspan="2">60.70(3件商品)</td></tr></tfoot>

</table>

<button onclick="dialog()">添加</button>

<div id="dialogId" class="hide" style=" width:300px;height:200px;border:1px solid #3d444c;margin-left:40%">

    <input type="text" name="name" class="one"/>

    <input type="text" name="price"  class="two"/>

    <button onclick="save()">确定</button>

    <button onclick="cancel()">取消</button>

</div>

<script type="text/javascript">

    var tip = document.getElementById("dialogId");

    var dialog = function(){

        tip.className = "";

    };

//    var sum = 60.70;

    var items = {};

    var save = function(){

        var itemObj = {};

        itemObj.name = document.getElementsByClassName("one")[0].value;

        itemObj.price = parseInt(document.getElementsByClassName("two")[0].value);

        items = itemObj;

        add(items);

        items = {};

        tip.className = "hide";

    }

    var cancel = function(){

        tip.className = "hide";

    }

//闭包实现局部变量保存在内存中

    function a(d){

        var sum = 60.70;

        if(!d.length){

            function c(d){

                if(d && !d.length){

                    sum = sum + d.price;

                }

                else return sum;

                return sum;

            };

        }

        return c;

    };

    var sumary = a(items);

    function add(items) {

            var add = document.createElement("tr");

            var src = document.getElementsByTagName("tbody");

            add.innerHTML = "<td>"+items.name+"</td><td>"+items.price+"</td><td><a href='javascript:void(0);'>删除</a></td>";

            src[0].appendChild(add);

        var tableObj = document.getElementById("jsTrolley");

        var num = tableObj.rows.length -2;

        var len = tableObj.rows.length;

//        sum+=items.price;

//        tableObj.rows[len-1].cells[1].innerText  =sum.toFixed(2)+"("+num+"件商品)";

        tableObj.rows[len-1].cells[1].innerText  =sumary(items).toFixed(2)+"("+num+"件商品)";

        bind();

    }

    function bind() {

        var arr = document.getElementsByTagName("a");

        var src = document.getElementsByTagName("tbody");

        s = src[0];

        var len = arr.length;

        for(var i =0 ;i<len ;i++)

        {

            arr[i].setAttribute("onclick","foo(s,this)");

        }

    }

    function foo(x,y){

        var sum = sumary();

        var tar = y.parentNode.parentNode;

        x.removeChild(tar);

        var v = y.parentNode.previousSibling.innerHTML;

        sum -=v;

        var tableObj = document.getElementById("jsTrolley");

        var num = tableObj.rows.length -2;

        tableObj.rows[tableObj.rows.length-1].cells[1].innerText = sum.toFixed(2)+"("+num+"件商品)";

    }

    bind();

    function show(){

        var    tableRowInfo ="";

        tableObj = document.getElementById("jsTrolley");

        for(var i =0 ;i<tableObj.rows.length ; i++){

            for(var j=0 ;j<tableObj.rows[i].cells.length ; j++){

                tableRowInfo  +=  tableObj.rows[i].cells[j].innerText + " ";

            }

            console.log(tableRowInfo); // 打印每行信息

            tableRowInfo ="";

        }

    }

    show();

</script>

</body>

</html>

table动态增加删除的更多相关文章

  1. JS动态增加删除UL节点LI

    JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...

  2. Repeater 动态增加删除一行

    文章参考:文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html 效果: 前台代码: <%@ Page La ...

  3. Hadoop 2.6.3动态增加/删除DataNode节点

    假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode ...

  4. table动态添加删除一行和改变标题

    <style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: ...

  5. wpf动态增加删除控件

    我在xaml中定义了一个名字为morepictureWrapPan为WrapPanel,然后将控件添加在此WrapPanel中.由于要实现控件的删除功能,所以增加的textbox和button的名字都 ...

  6. jquery validate 动态增加删除验证规则（转载）

    页面加载完成初始化form validate $("#user_regForm").validate({ errorPlacement: function(error, eleme ...

  7. jquery validate 动态增加删除验证规则

    增加规则示例: $('.class').rules('add',{ required: true, messages:{ required: '这是必填,请填写', } }); 删除规则示例: $(' ...

  8. JQuery动态增加删除元素

    <form action="" method="post" enctype="multipart/form-data"> < ...

  9. MVC中用jQuery加BootStrap实现动态增加删除文本输入框！

    http://www.freejs.net/article_biaodan_278.html 这是在网上找到方法,我修改了一下实合我的项目,发博只为收藏记录并加深记忆. 修改后效果如下 @model ...

随机推荐

  1. SpringSecurity简单记录

    在pom.xml中将springsecurity导入后,对于springsecurity会出现三个依赖包:spring-security-web,spring-security-config,spri ...

  2. angular 定时函数

    注入$interval,$timeout   服务 2.定义函数 var aa = $interval(function(){ $timout(function(){ ..... }) },,定时时间 ...

  3. 如何用jmeter进行数据库性能测试

    由于业务需要,需要进行数据库性能测试,记录过程进行学习 测试前期准备: 1.测试点准备及需求点 a.性能测试目的 b.jmeter测试数据库基本脚本  get c.数据库性能监控工具选择 d.服务器性 ...

  4. 各种sqlite管理工具

    sqlite管理工具 平台 下载链接 sqlitestudio 支持多平台 https://sqlitestudio.pl/index.rvt?act=download sqlitespy windo ...

  5. python学习笔记 18-4-11

    一.执行一个简单的代码 1.先创建目录 mkdir /home/dev 2.切换到目录 cd /home/dev 3.在目录下创建文件夹 vim hello.py 4.编辑文件内容 vim hello ...

  6. 多渠道打包如何运行/debug指定的渠道

    如果配置了多渠道,像这里有3个,分别为flavor1,flavor2,flavor3 productFlavors { flavor1{ packageName "com.xxx.yymad ...

  7. 强大的css3库

    http://www.html5tricks.com/demo/css3-animate-css/index.html 关注微信小程序

  8. Delphi编程之爬取贴吧图片最终版

    接着前面两篇文章的内容,我们今天把这个贴吧爬取图片的程序完善,让它具有可以下载贴吧多页和帖子多页图片的能力. 主界面设计如下,包含3个labelededit,3个button,1个memo,1个str ...

  9. 在VS中连接MySQL

    VS没有主动提供那些繁多的连接器,需要的话得自己再安装这些第三方程序包. MySQL为windows平台开发者提供了许多程序包:http://dev.mysql.com/downloads/windo ...

  10. bug狩猎

    最近需求少了,终于有时间修一下底层的bug,做一点工具方便查bug,写篇文章简单记录一下. 一是优化了一个玩法进程的启动速度.这个玩法需要用战力做匹配,玩家按战力分段放进不同的桶里,每个桶用skipl ...