<!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. Android_ListView适配器

    ListView如何优化 复用convertView缓存(减少ListView绘制). 自定义静态类ViewHolder(减少findViewById次数),通过setTag().getTag()获取 ...

  2. 类似LIS+贪心(ZOJ1025)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=25 解题报告: #include <cstdio> #in ...

  3. linux命令之awk命令

    awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.数据可以来自标准输入(stdin).一个或多个文件,或其它命令的输出.它支持用户自定义函数和动态正则表达式等先进功能,是linu ...

  4. 如何迅速掌握并提高linux运维技能（收藏文）

    如何迅速掌握并提高linux运维技能   文章来源于南非蚂蚁   之前曾经写过一篇如何学习Linux的文章,得到了很多反馈,大家都在分享自己的学习经验和体会,并且也提出了不少意见和建议.学习这个事情其 ...

  5. 手动创建maven项目+cmd+webapp+tomcat

    1.创建文件夹 2.在刚刚创建的文件夹目录下:创建一个scr文件夹和pom.xml文件 3.在pom.xml配置 <?xml version="1.0" encoding=& ...

  6. 旧文备份:VC中嵌入NASM编写的汇编函数

    在公司开发的RT下没法使用C库,并且替代库函数没有几个,需要用到setjmp和longjmp函数,没办法,只能自己想办法了,上sourceforge淘换到一个小日本的工程,提供这两个函数的替代源码,名 ...

  7. GAN的调研和学习

    近期集中学习了GAN,下面记录一下调研的结果,和学习的心得,疏漏的地方,敬请指正. 本文将分为几个部分进行介绍,首先是GAN的由来,其次是GAN的发展,最后是GAN的应用. 先把最近收集的资料列举一下 ...

  8. 关于Vue 兄弟组件通信

    最近项目中遇到希望在操作路由组件里面内容的时候可以影响共用组件Header组件(这个其实就是他的兄弟组件)的操作.  意思就是 router-view指向的router来影响Header组件的信息 首 ...

  9. Java分享笔记：Map集合(接口)的基本方法程序演示

    package pack02; import java.util.*; public class MapDemo { public static void main(String[] args) { ...

  10. Delphi7程序调用C#写的DLL解决办法(转)

    近来,因工作需要,必须解决Delphi7写的主程序调用C#写的dll的问题.在网上一番搜索,又经过种种试验,最终证明有以下两种方法可行:    编写C#dll的方法都一样,首先在vs2005中创建一个 ...