<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>创建元素</title>
<style type="text/css">
#total {
font-size: 14px;
font-weight: bold;
text-align: right;
padding-right: 20px;
}

td>span {
color: red;
}
</style>
</head>

<body>

<input type="text" placeholder="输入商品名称" id="gn" />
<br />
<br />
<input type="text" placeholder="输入商品价格" id="gs" />
<br />
<br />
<button onclick="addCart()">添加商品到购物车</button>
<br />
<hr />

<table border="1" cellspacing="0" width="40%" id="cart">
<tr>
<th>&nbsp;&nbsp;</th>
<th>序号</th>
<th>商品名称</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr id="lastRow">
<td>
<input type="checkbox" name="choiceAll" onclick="choiceAll(this)" /> 全选</td>
<td colspan="4" id="total">总额:
<span id="sum">0</span>
</td>
</tr>
</table>
<script>
// 找到商品名称和价格的对象
var gn = document.getElementById('gn')
var gs = document.getElementById('gs')
// 找到购物车的对象
var cart = document.querySelector("#cart") //table

var tbody = cart.querySelectorAll("tbody")[0]
var lastRow = document.getElementById("lastRow")
//总和的span
var show_sum = document.getElementById("sum")
var n = 1
//　添加表格行

function addCart() {
//　开始：ｃａｒｔ（ｔａｂｌｅ）
//　创建元素：　ｔｒ－－－＞ｔｄ－－－＞向ｔｄ中添加内容
var tr = document.createElement("tr")
for(var i = 0; i < 5; i++) {
var td = document.createElement("td")
switch(i) {
case 0: //选项
td.innerHTML = "<input type='checkbox' name='choice'/>"
break
case 1: //序号
td.innerText = n
break
case 2: //名称
td.innerText = gn.value
break
case 3: //价格
td.innerText = gs.value
break
case 4: //操作
td.innerHTML = "<a onclick='delgoods(this)' href='#'>删除</a> <a href='#'>修改</a>"
default:
break
}
// 添加到tr上 添加时注意括号里面的元素不要加引号
tr.appendChild(td)

}
// 讲tr 对象 添加到table中
tbody.insertBefore(tr, lastRow)
// 自增
n++
}
// 删除商品函数
function delgoods(obj) {
var flag = confirm("确定删除该商品吗？")

if(flag) {
tbody.removeChild(obj.parentNode.parentNode)
}
}
// 全选事件
// 找到复选则的对象

// 判断 选择的checked 的值是否选择了，如果选择则为tru额，否则则为false
function choiceAll(obj) {
var choices = document.getElementsByName("choice")
if(obj.checked) {
for(var i = 0; i < choices.length; i++) {
choices[i].checked = true
}
var trs = tbody.querySelectorAll("tr") //所有的tr 包括头尾，需要减掉
var sum = 0
for(var i = 1; i < trs.length - 1; i++) {
var price = trs[i].children[3].innerText
// 做累加
sum += parseInt(price)
}
// 设置和
show_sum.innerText = sum
} else {
for(var i = 0; i < choices.length; i++) {
choices[i].checked = false
// 设置价格为0
show_sum.innerText = 0
}
}
}
</script>
</body>

</html>

用js做的表单的增，删，以及全选的更多相关文章

  1. js实现表单checkbox的单选，全选

    全选&单选 //<input type="checkbox" name="" class="quan" value=" ...

  2. vue.js带复选框表单的增删改查

    近段时间由于公司项目要求,前端开始使用VUE框架进行开发,最近刚开始学习,做了一个表单的增删改查,和大家分享一下. 页面模型代码设计如下 <template> <div id=&qu ...

  3. django做form表单的数据验证

    我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1.在views文件中导入forms模块 2. ...

  4. js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

    js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...

  5. 第十七篇 JS验证form表单

    JS验证form表单   这节课做一个实际的,项目里会遇到的东西,例如登录页面,我们输入‘用户名’和‘密码’或者‘手机号’还有‘验证码’等等,它都会做一个前端验证,比如验证码,是6位有效数字组成,那么 ...

  6. JS、jqueryie6浏览器下使用js无法提交表单的解决办法

    -----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...

  7. js/jquery/插件表单验证

    媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...

  8. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  9. 通过JS模拟select表单，达到美化效果[demo][转]

    转自: http://www.cnblogs.com/dreamback/p/SelectorJS.html 通过JS模拟select表单,达到美化效果 Demo ------------------ ...

随机推荐

  1. ABI and compiler

    http://stackoverflow.com/questions/2171177/what-is-application-binary-interface-abi ABIs cover detai ...

  2. 2018.8.3 Java中容易犯错误的问题思考与总结

    Java容易犯错误的问题思考 float型 float f = 3.4 是否正确 不正确,应该用强制类型转换.如下所示:float f = (float)3.4 或float f = 3.4f 在ja ...

  3. javaweb基础(37)_mysql数据库自动生成主键

    测试脚本如下: 1 create table test1 2 ( 3 id int primary key auto_increment, 4 name varchar(20) 5 ); 测试代码: ...

  4. 【洛谷P1064】[NOIP2006] 金明的预算方案

    金明的预算方案 显然是个背包问题 把每个主件和它对应的附件放在一组,枚举每一组,有以下几种选法: 1.都不选 2.只选主件 3.一个主件+一个附件 4.一个主件+两个附件 于是就成了01背包.. #i ...

  5. fcc初级算法方法总结

    var arr = str.split("分隔符"): var newArr = arr.reverse(); var str = arr.join("连接符" ...

  6. 17、SpringBoot------整合dubbo

    SpringBoot整合Dubbo+Zookeaper 1.安装运行zookeeper (1)下载zookeeper 官网:http://zookeeper.apache.org/ (2)解压缩 (3 ...

  7. Python——列表

    应用场景,要统计大量的人员信息.就可以用列表的形式进行.name = ['邱秀','玄永俊','杨栋豪']查:print(name[2],name[0]) #取号码进行识别print(name[1:3 ...

  8. django+xadmin在线教育平台（九）

    django admin介绍 上一章我们进行了需求分析和数据库设计.本章我们来快速搭建一个可用的后台管理系统. 后台管理系统特点: 权限管理 少前端样式.(样式一般不是很看重), 快速开发 djang ...

  9. JavaScript - 库 jQuery

    测试 JavaScript 框架库 - jQuery 引用JQuery 如需测试JavaScript库,您需要在网页中引用它. 为了引用某个库,请使用<script>标签,其src属性设置 ...

  10. ethereum(以太坊)(二)--合约中属性和行为的访问权限

    pragma solidity ^0.4.0; contract Test{ /* 属性的访问权限 priveta public internal defualt internal interlnal ...