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是一套对文档的内容进行抽象和概念化的方法, 在现实世界里,人们对所谓的'世界对象模型'都不会陌生,例如,当用'汽车'.'房子'和'树'等名词来 ...
随机推荐
- erlang在redhat上的安装
erlang在redhat上的安装 1) 下载源码包: http://www.erlang.org/download/otp_src_17.3.tar.gz 2) RHEL6.4预安装包 $ yum ...
- PS 滤镜算法原理——拼贴
%%%% Tile %%%%% 实现拼贴效果 %%%%% 将原图像进行分块,然后让图像块在 %%%%% 新图像范围内进行随机移动,确定移动后的边界 %%%%% 将移动后的图像块填入新图像内 clc; ...
- LeetCode(38)-Valid Sudoku
题目: Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could ...
- Java内存模型_volatile
volatile变量自身具有下列两点特性: 可见性:锁的happens-before规则保证释放锁和获取锁的两个线程之间的内存可见性.意味着对一个volatile变量的读,总是能看到(任意线程)对这个 ...
- apache压力测试工具的apache bench和JMeter的安装
Apache压力测试工具的安装 1,apache bench的安装 apache bench工具集成在http的软件包内,可以直接安装apache就可以. 当有些时候,我们不需要用到所有的软件包,我 ...
- MinGW安装与使用简介
MinGW 安装与使用简介 安装方法:其实很简单,如下: Step one: 到这里下载 MinGW, 网速慢的话可能打不开, 是个外国网站 (上面的网站镜像可能 出了点问题 , 有的东西下载下来却不 ...
- TypeScript 的声明文件的使用与编写
https://fenying.net/2016/09/19/typings-for-typescript/ TypeScript 是 JavaScript 的超集,相比 JavaScript,其最关 ...
- IEEE发布2017年编程语言排行榜:Python高居首位
https://news.cnblogs.com/n/574248 编者按:本文由微信公众号“机器之心”(ID:almosthuman2014)编译,机器之心专注生产 AI 领域专业性内容.本文作者: ...
- 在UltraEdit中如何像NotePad++一样实现双击单词在全文中高亮
NotePad++中有个功能特别好用,就是双击某个单词,这个单词就会在全文档中高亮,如下图 我经常用UltraEdit,结果是UE中没有这个功能,这么实用的功能居然没有? 没关系,在UE中shift+ ...
- 基于NetMQ的TLS框架NetMQ.Security的实现分析
基于NetMQ的TLS框架NetMQ.Security的实现分析 前言 介绍 交互过程 支持的协议 TLS协议 支持的算法 实现 握手 第一次握手 Client Hello 第二次握手 Server ...