用js做的表单的增，删，以及全选
<!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> </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做的表单的增，删，以及全选的更多相关文章
- js实现表单checkbox的单选，全选
全选&单选 //<input type="checkbox" name="" class="quan" value=" ...
- vue.js带复选框表单的增删改查
近段时间由于公司项目要求,前端开始使用VUE框架进行开发,最近刚开始学习,做了一个表单的增删改查,和大家分享一下. 页面模型代码设计如下 <template> <div id=&qu ...
- django做form表单的数据验证
我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1.在views文件中导入forms模块 2. ...
- js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...
- 第十七篇 JS验证form表单
JS验证form表单 这节课做一个实际的,项目里会遇到的东西,例如登录页面,我们输入‘用户名’和‘密码’或者‘手机号’还有‘验证码’等等,它都会做一个前端验证,比如验证码,是6位有效数字组成,那么 ...
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
-----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...
- js/jquery/插件表单验证
媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...
- js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- 通过JS模拟select表单，达到美化效果[demo][转]
转自: http://www.cnblogs.com/dreamback/p/SelectorJS.html 通过JS模拟select表单,达到美化效果 Demo ------------------ ...
随机推荐
- express_webpack自动刷新
现在,webpack可以说是最流行的模块加载器(module bundler).一方面,它为前端静态资源的组织和管理提供了相对较完善的解决方案,另一方面,它也很大程度上改变了前端开发的工作流程.在应用 ...
- js实现弹窗一个ip在24小时只弹出一次的代码
function cookieGO(name) { var today = new Date(); var expires = new Date(); expires.setTime(today.ge ...
- 第一个AngularJS控制器
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 史上最简单的SpringCloud教程 | 第十二篇: 断路器监控(Hystrix Dashboard)
转载请标明出处: 首发于:https://www.fangzhipeng.com/springcloud/2017/07/12/sc12-hystix-dashbd/ 本文出自方志朋的博客 最新Fin ...
- linux命令详解-useradd，groupadd
linux命令详解-useradd,groupadd 我们在linux命令行中输入useradd: Options: -b, --base-dir BASE_DIR base direc ...
- MySQL - Mac下安装MySQL
1. 去官网下载dmg的安装文件. 2. 下载完成后,运行安装文件,按步骤进行安装,安装完成后会弹出一个框显示临时密码! 3. 编辑~/.bashrc文件,配置快速启动/停止/重启/cdhome/别名 ...
- datatable中reload和load的区别
ajax.reload()用于datatable表某个数据的变化而重新加载 ajax.url(url).load() 用于切换url时,datatable重新获取数据,加载.
- C#基础-面向对象-封装
封装 命名空间 using System; using System.Collections.Generic; using System.Text; namespace ConsoleApp6 { c ...
- 微信公众号支付java版本
回调函数 @RequestMapping("/toPay") public String toPay(HttpServletRequest request, HttpServlet ...
- PHP 日期处理函数 date() 、mktime()
一.前言 php是世界上最好的语言! 二.介绍 mktime()函数获取当周\当天\当月 /** * 微程-日期工具函数 week: 当周 day: 当天 month: 当月 * @author 狗蛋 ...