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的更多相关文章

  1. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  2. ionic准备之angular基础——dom操作相关(6)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery2.x源码解析(DOM操作篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM ...

  4. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  5. DOM操作标签,事件绑定,jQuery框架

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用 动态创建一个标签 var 变 ...

  6. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  7. 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  8. python 全栈开发,Day54(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  9. DOM及相关操作

    1.背景介绍        什么是DOM?简单地说,DOM是一套对文档的内容进行抽象和概念化的方法, 在现实世界里,人们对所谓的'世界对象模型'都不会陌生,例如,当用'汽车'.'房子'和'树'等名词来 ...

随机推荐

  1. 关于C++“加、减机制”的整理

    今天上C++的课,杨老师提到C++继承是“加机制”的,而没有像人类进化一样采取的是“减机制”,这样会导致代码的膨胀和冗余.回来后,特地查阅了一下资料,发现这方面的文章很少. 下边的资料摘自网上及杨老师 ...

  2. 苹果新的编程语言 Swift 语言进阶(一)--综述

    Swift 是苹果开发和提供的供开发IOS 和OS X应用的一门新的语言.Swift语言基于C 和Objective-C语言,除了提供C 和Objective-C语言具有的所有语法功能外,为了编程方便 ...

  3. kettle 的表输出 table output

    kettle的表输出: 双击后,看设置, 1,在connecttion后面,点击new里新建一个.设定各个选项值,如选择mysql类型,则配置hostname,database name,端口, 用户 ...

  4. shell脚本调用python脚本的路径问题

    脚本的相互调用中,只有在同一级目录下才可以使用__file__参数去获取路径名,(在shell里使用pwd也同样),否则,使用的就是主文件(最开始运行的脚本程序)的所在位置,是错误路径:一定要注意当期 ...

  5. 【Android 应用开发】Android之Bluetooth编程

    Android Bluetopth 编程大牛文章 http://my.oschina.net/u/994235/blog?catalog=313604 ViewGroup 相关资料 : http:// ...

  6. 深入理解JNI

    深入理解JNI 最近在学习android底层的一些东西,看了一些大神的博客,整体上有了一点把握,也产生了很多疑惑,于是再次把邓大神的深入系列翻出来仔细看看,下面主要是一些阅读笔记. JNI概述 JNI ...

  7. 【47】java的类之间的关系:泛化、依赖、关联、实现、聚合、组合

    java的类之间的关系:泛化.依赖.关联.实现.聚合.组合 泛化: • 泛化关系(Generalization)也就是继承关系,也称为"is-a-kind-of"关系,泛化关系用于 ...

  8. redis菜鸟教程

    Redis 简介 http://www.runoob.com/redis/redis-intro.html Redis 安装 http://www.runoob.com/redis/redis-ins ...

  9. LeetCode(61)-Valid Palindrome

    题目: Given a string, determine if it is a palindrome, considering only alphanumeric characters and ig ...

  10. The 2nd tip of DB Query Analyzer

    The 2nd tip of DB Query Analyzer                               Ma Genfeng   (Guangdong Unitoll Servi ...