<!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. Uva 10806 来回最短路，不重复，MCMF

    题目链接:https://uva.onlinejudge.org/external/108/10806.pdf 题意:无向图,从1到n来回的最短路,不走重复路. 分析:可以考虑为1到n的流量为2时的最 ...

  2. Codeforces 760B Frodo and pillows

    题目链接:http://codeforces.com/problemset/problem/760/B 题意:n个床位,m个枕头,第k个位置最多有多少个枕头,其中相邻之间的差<=1; 第k个位置 ...

  3. node.js 练习1

    1.利用editplus 创建 n1.js 文件 2.输入代码 3.打开cmd 输入 node n1.js 4.打开浏览器 输入 localhost:8000 5.再次回看 cmd

  4. Real VNC软件

    RealVNC5.2.3+key http://yunpan.cn/cjchAkeIgEAPG (提取码:4092)

  5. Fetch 头像剪切修改

    前言:通过Input file upload 图片到canvas 中进行剪裁,react 可以引入react-avatar-editor对图片进行剪裁 react-avatar-editor的使用 & ...

  6. Python——列表

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

  7. LeetCode-177:第N高的薪水

    第N高的薪水与第二高的薪水,解题思路是一样的,只要对LeetCode-176的SQL做一下变形,便可以满足这题,详见:https://www.cnblogs.com/zouqf/p/10282392. ...

  8. JS - 简单的下载图片至本地

    <iframe id="saveImg" src="图片路径" style="display:none;"></ifram ...

  9. laravel通过make auth实现手机号登录

    首先按照Laravel的教程,安装认证系统. php artisan make:auth php artisan migrate laravel已经安装完成认证系统,默认注册和登录都是用邮箱. 如果想 ...

  10. php结合redis实现高并发下的抢购、秒杀功能【转】

    抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个:1 高并发对数据库产生的压力2 竞争状态下如何解决库存的正确减少("超卖"问题)对于第一个问题,已经很容易想到用缓存 ...