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是一套对文档的内容进行抽象和概念化的方法, 在现实世界里,人们对所谓的'世界对象模型'都不会陌生,例如,当用'汽车'.'房子'和'树'等名词来 ...
随机推荐
- 【45】java的封装剖析
类是构造对象的模板或蓝图. 封装的一些概念 从形式上看,封装不过是将数据和行为组合到一个包中,并对对象的使用者隐藏了数据的实现形式. 每个对象都包含实例域和方法.实例域的集合代表了一个集合的状态,通过 ...
- Windows2008修改密码策略简单介绍
Windows2008修改密码策略简单介绍 Windows的密码策略,确实是挺繁琐的,刚接触SharePoint2010,装的windows2008 R2,就遇到了改密码策略的问题. 打开本地安全策略 ...
- Mac OS X汇编语言常识
首先OS X的syscall表位置在 /usr/include/sys/syscall.h
- OpenCV x64 vs2010 下打开摄像头录制视频写成avi(代码为转载)
首先参照下面这里进行opencv x64位机器下面的配置 http://wiki.opencv.org.cn/index.php/VC_2010%E4%B8%8B%E5%AE%89%E8%A3%85O ...
- WPF中使用后台代码来控制TreeView的选择项(SelectedItem)以及展开节点操作
首先为TreeView控件制作一个Style: <Style x:Key="LibraryTreeViewItemStyle" TargetType="{x:Typ ...
- mysql 5.7主从安装和配置
本文主要介绍mysql 5.7主从复制,转载请注明出处 下载地址 模块 版本 下载地址 mysql 5.7 https://dev.mysql.com/downloads/mysql/ libaio( ...
- windows安装weblogic和域的建立
Copyright ©2014 Manchester United
- java面试题之分析(二)
QUESTION NO:2 package com.cdu.test; public class Test { static boolean foo(char c) { System.out.pri ...
- centos 5.3 安装(samba 3.4.4)
centos 5.3 安装(samba 3.4.4) 博客分类: 操作系统 Linux 随着Linux的普及,如何共享Linux下的文件成为用户关心的问题.其实,几乎所有的Linux发行套件都提供 ...
- 全面解读Java NIO工作原理(2)
全面解读Java NIO工作原理(2) 2011-12-14 10:31 Rollen Holt Rollen Holt的博客 我要评论(0) 字号:T | T JDK 1.4 中引入的新输入输出 ( ...