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是一套对文档的内容进行抽象和概念化的方法, 在现实世界里,人们对所谓的'世界对象模型'都不会陌生,例如,当用'汽车'.'房子'和'树'等名词来 ...
随机推荐
- PS 图像特效算法— —渐变
这个特效利用图层的混合原理,先设置一个遮罩层,然后用遮罩层与原图进行相乘,遮罩层不同,图像最后呈现的渐变效果也不一样. clc;clear all;close all;addpath('E:\Phot ...
- 为什么我们要使用ssh框架技术,及感想
前言: 在公司从C++转向Java Web方向大概有3个月(11月初-1月底)了.三个月前对Java和Web还几乎是零基础.然后从安装Eclipse,MySQL,tomcat开始,到学习HTML/CS ...
- 恶补web之一:html学习(1)
发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦! html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),h ...
- .Net中的并行编程-7.基于BlockingCollection实现高性能异步队列
三年前写过基于ConcurrentQueue的异步队列,今天在整理代码的时候发现当时另外一种实现方式-使用BlockingCollection实现,这种方式目前依然在实际项目中使用.关于Blockin ...
- two sum II
Given an array of integers that is already sorted in ascending order, find two numbers such that the ...
- PLSQL Developer使用技巧
本文由liuyk80贡献 ·PL/SQL Developer 使用技巧 1.PL/SQL Developer 记住登陆密码 在使用 PL/SQL Developer 时,为了工作方便希望 PL/SQL ...
- add-apt-repository出Exception问题
参考:http://blog.sina.com.cn/s/blog_5388923c0100nu8h.html 症状: xxxx@xxxxx:~$ sudo add-apt-repository pp ...
- Spring Security简明实践及相关国际化处理
别人的都是最佳实践,因为我目前的设置没有按照参考文档推荐,还是采用DelegatingFilterProxy,所以我只能说简明实践.先贴我的applicationContext-security.xm ...
- HttpDNS的坑以及一个针对安卓不太完善的测试方案
背景:单位因为域名劫持(具体表象是某个地区的用户ping不通域名或者因为DNS解析的ip跨网段导致访问速度很慢)需要运维经常去定位,于是提出了httpDNS方案. 想法是美好的,现实是残酷的.没引入这 ...
- 微信小程序中自定义函数的学习使用
新手,最近在给学校搞个党费计算器.需要自己定义函数来实现某个功能. 1.无参函数: 函数都是写在js文件里面的. Page({ data:{ income1:'0', }, cal:function( ...