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是一套对文档的内容进行抽象和概念化的方法, 在现实世界里,人们对所谓的'世界对象模型'都不会陌生,例如,当用'汽车'.'房子'和'树'等名词来 ...
随机推荐
- C语言之linux内核实现位数高低位互换
linux内核实在是博大精深,有很多优秀的算法,我之前在工作中就遇到过位数高低位交换的问题,那时候对于C语言还不是很熟练,想了很久才写出来.最近在看内核的时候看到有内核的工程师实现了这样的算法,和我之 ...
- Graph Cuts学习笔记2014.5.16----1
进行了一段时间的论文学习后,现在下载了一些代码,准备从OpenCV跟matlab两个方面着手搭建自己的图像分割平台,计划耗时一个月左右的时间! 昨天去西工大,听了一场Graph Asia的报告,里面有 ...
- Java不走弯路教程(6.JDBC)
6.JDBC 在上一章,我们完成了MyDb数据库的简单的客户段调用.作为产品我们还封装了驱动程序,并且提供了统一的调用接口. 大家应该知道,市面上有多种数据库产品,比如Oracle,Mysql,DB2 ...
- 伸展树--java
文字转载自:http://www.cnblogs.com/vamei 代码转载自:http://www.blogjava.net/javacap/archive/2007/12/19/168627.h ...
- contentType,charset和pageEncoding的区别
简单点总结就是jsp页面头上这样写 <%@ page contentType="text/html;charset=GBK" %> 页面用GBK编码 pageEnco ...
- XML学习教程
XML学习进阶1-- 什么是XML. 为什么使用 XML?... 什么是 XML?... 数据的结构表示... XML 文档... 数据是从表示和处理中分离出来的... 使XML数据自描述... XM ...
- storm中的Scheduler
Scheduler是storm的调度器,负责为topology分配当前集群中可用的资源.Storm分别提供了3中调度器: EvenScheduler:会将系统中的可用资源均匀地分配给当前需要任务分配的 ...
- SQL遇到的问题
1.问题描述:拼接sql字符串涉及到表变量时报错. 解决办法:把表变量的定义一同放在字符串中. 2.问题描述:EF添加实体后,调用存储过程调用不到 解决办法:必须先db.SaveChanges()后 ...
- Go语言开发区块链只需180行代码
区块链开发用什么语言?通过本文你将使用Go语言开发自己的区块链(或者说用go语言搭建区块链).理解哈希函数是如何保持区块链的完整性.掌握如何用Go语言编程创造并添加新的块.实现多个节点通过竞争生成块. ...
- Spring Cache 笔记
@(Java ThirdParty)[Spring Cache] Spring Cache Abstraction 简介 Spring Cache提供了对底层缓存使用的抽象,通过注解的方式使用缓存,减 ...