dom操作相关,byebye T T
o = {
    name: 'aa',
    price: 11,
}
function add(items) {
    var bodys = document.getElementsByTagName('tbody');
    var trs = document.getElementsByTagName('tr');
    var trLen = trs.length;
    var str = `
        <td>${items['name']}</td>
        <td>${items['price']}</td>
        <td><a href="javascript:void(0);">删除</a></td>`
        var tr2 = document.createElement("tr");
        tr2.innerHTML = str;
        bodys[bodys.length - 1].appendChild(tr2);
        var sum = 0;
        for (var i = 1; i < trs.length - 1; i++) {
            var tds = trs[i].getElementsByTagName('td');
            // print(tds[1].innerText)
            sum +=  parseFloat(tds[1].innerText)
        }
        var foot = document.getElementsByTagName('tfoot')[0];
        var all = foot.getElementsByTagName('td')[0].innerText;
        var rows = trs.length;
        var result = `${sum.toFixed(2)}(${rows - 2}件商品)`;
        foot.getElementsByTagName('td')[0].innerText = result;
}
function bind() {
    var bodys = document.getElementById("jsTrolley");
    var trs = bodys.getElementsByTagName("tr");
    //给tr绑定click事件
    for(var i in trs){
      trs[i].onclick = function(e) {
        trs[this.rowIndex].parentNode.removeChild(trs[this.rowIndex]);
        var sum = 0;
        for (var i = 1; i < trs.length - 1; i++) {
            var tds = trs[i].getElementsByTagName('td');
            // print(tds[1].innerText)
            sum +=  parseFloat(tds[1].innerText)
        }
        var foot = document.getElementsByTagName('tfoot')[0];
        var all = foot.getElementsByTagName('td')[0].innerText;
        var rows = trs.length;
        var result = `${sum.toFixed(2)}(${rows - 2}件商品)`
        // print(result)
        foot.getElementsByTagName('td')[0].innerText = result;
      };
    }
}
dom操作相关,byebye T T的更多相关文章
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
		1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ... 
- ionic准备之angular基础——dom操作相关(6)
		<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ... 
- jQuery2.x源码解析(DOM操作篇)
		jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM ... 
- javascript DOM 操作基础知识小结
		经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ... 
- DOM操作标签,事件绑定,jQuery框架
		DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用 动态创建一个标签 var 变 ... 
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
		昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ... 
- 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
		小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ... 
- python 全栈开发,Day54(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
		04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ... 
- DOM及相关操作
		1.背景介绍 什么是DOM?简单地说,DOM是一套对文档的内容进行抽象和概念化的方法, 在现实世界里,人们对所谓的'世界对象模型'都不会陌生,例如,当用'汽车'.'房子'和'树'等名词来 ... 
随机推荐
- TCP连接建立系列 — 服务端接收SYN段
			本文主要分析:服务器端接收到SYN包时的处理路径. 内核版本:3.6 Author:zhangskd @ csdn blog 接收入口 1. 状态为ESTABLISHED时,用tcp_rcv_esta ... 
- sieve的objective-c实现
			用obj-cl来实现前面的sieve代码貌似"丑"了不少,应该有更好的方式:比如不用Foundation或不用NSArray类,而改用其它更"底层"的类. 先把 ... 
- how tomcat works 读书笔记 十一 StandWrapper 上
			方法调用序列 下图展示了方法调用的协作图: 这个是前面第五章里,我画的图: 我们再回顾一下自从连接器里 connector.getContainer().invoke(request, resp ... 
- 杭电ACM 1000题
			import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner cin=n ... 
- 二、添加 Insert into
			文档目录 开始使用 初始化查询实例: LambdaToSql.SqlClient DB = new LambdaToSql.SqlClient(); 添加实体数据 ", IP = &quo ... 
- 排序算法入门之归并排序(java实现)
			归并排序是采用分治法的典型应用. 参考<数据结构与算法分析-Java语言描述> 归并排序其实要做两件事: (1)"分解"--将序列每次折半划分. (2)"合并 ... 
- 解密for循环工作机制之迭代器,以及生成器、三元表达式与列表解析、解压序列
			本节内容 1.迭代器协议与for循环 2.三元表达式 3.解压序列 4.列表解析 5.生成器 迭代器协议与for循环 1.迭代器协议是指:对象必须提供一个next方法,执行该方法要么返回迭代中下一项, ... 
- IdentityServer4实战 - AccessToken 生命周期分析
			一.前言 IdentityServer4实战这个系列主要介绍一些在IdentityServer4(后文称:ids4),在实际使用过程中容易出现的问题,以及使用技巧,不定期更新,谢谢大家关注.使用过id ... 
- rsync+innotify做到同步式更新
			innotify主要功能: 他是内核用于通知用户控件程序文件系统变化的机制. 也就是说,当服务器发生了任何的改动,内核都会知道并通知用户. rssync(做同步的)+innotify做到的就是实时的同 ... 
- mac os x 10.9.3 升级到10.10.4 记录
			昨天终于忍不住,将mac pro 的操作系统从 os x 10.9.3 升级到10.10.4,因为网络不给力,500k/s,光系统包都要5.6G,所以整整下来了一个工作白天,等下班的时候开始安装,不过 ... 
