<!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. 简单广搜，迷宫问题(POJ3984)

    题目链接:http://poj.org/problem?id=3984 解题报告: 1.设置node结构体,成员pre记录该点的前驱. 2.递归输出: void print(int i) { ) { ...

  2. 使用taobao cnpm 源解决npm无法安装module问题

    npm 安装nativescript时出现异常,一直停着不动.应该是源被墙了的问题可以使用淘宝仓库,执行下面的命令: alias cnpm="npm --registry=https://r ...

  3. 2017.11.2 JavaWeb----第六章 Servlet技术

    JavaWeb ------第六章 Servlet技术 (1)在Web应用程序开发中,一般由JSP JavaBean技术和 Servlet技术的结合实现MVC开发模式.在MVC开发模式中将Web程序的 ...

  4. 2017.10.6 Java命名规范及使用情况

    Package 的命名 Package 的名字应该都是由一个小写单词组成. Class 的命名 Class 的名字必须由大写字母开头而其他字母都小写的单词组成 Class 变量的命名 变量的名字必须用 ...

  5. war和war exploded的区别

    是选择war还是war exploded 这里首先看一下他们两个的区别: (1)war模式这种可以称之为是发布模式,看名字也知道,这是先打成war包,再发布: (2)war exploded模式是直接 ...

  6. Java +安卓 定时任务

    1.android 自带闹钟定时任务 安卓闹钟可以配合广播来实现(不推荐),系统资源浪费,安卓系统在5.0以后的定时 任务貌似触发时间不准了,因为了为了省电. //获取系统闹钟 AlarmManage ...

  7. EL 和 JSTL 的使用

    EL Express Language 表达式语言 就是把<% 这里可以写java语言 %> 这种jsp的写法简化变为${ }的方式 例如 action="${pageConte ...

  8. XML 对xml文件的crud的增加 create操作 增加元素 增加属性

    把创建的节点挂到上一节点的最后 找到参考节点,使用insertBefore方法进行插入位置 xml添加属性使用setAttribute方法

  9. Map the Debris -freecodecamp算法题目

    Map the Debris 1.要求 返回一个数组,其内容是把原数组中对应元素的平均海拔转换成其对应的轨道周期. 原数组中会包含格式化的对象内容,像这样 {name: 'name', avgAlt: ...

  10. C++声明之CV限定符

    目录 1.const 1.1 const obj 如果调用 non-const member fun会编译出错 经典错误 1.2 例子:STD里的操作符重载 1.3 例子:<cpp primer ...