用js做的表单的增，删，以及全选

最新推荐文章于 2020-11-04 21:52:09 发布
最新推荐文章于 2020-11-04 21:52:09 发布
阅读量147 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42938842/article/details/86587896
版权
用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 οnclick="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" οnclick="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 οnclick='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>

posted on 2018-08-21 22:09 liangzhiwen 阅读( ...) 评论( ...) 编辑 收藏
_jreey_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript案例:表单删除
qq_67192586的博客
03-26 1052
js案例,表单删除
html css js表单中全选取消反选效果
11-11
接下来，我们利用JavaScript来实现全选、取消全选以及反选的功能。这通常涉及到对`querySelectorAll`、`checked`属性和事件监听器的使用。我们可以添加以下JavaScript代码： ```javascript document.getElementById...
纯JS/JQuery实现列表的动态新增、删除和修改+全选和取消全选操作
YangXin94的博客
11-04 4448
最近学了JS和JQuery，并且写出了列表的动态增加和删除还有修改的操作，现在我就来分享给大家 演示地址 点击这里查看页面效果 JS/JQuery代码 全选/取消全选 // 多选框的点击操作 // 默认样式 $(".list th:first").append("<label for='check' id='show'>全选</label>"); $("#check").click(function() { if(this.checked) {
在线选课案例—通过js实现全选，全不选和多选效果。顺便谈谈理解的半吊子flag这个变量
Scrow1204的博客
11-04 335
要点： 1.首先分为两个业务逻辑的模块，首先 全选/取消全选 的按钮会的选中的状态或者没有选中，他的返回值是Boolean类型，也就是说通过通过这个通过全选按钮将其Boolean类型的值，通过循环赋值给全选框下面所有的单选按钮 2.再单选按钮执行之前，将所有的单选按钮状态做一次判断，判断是否存在一个没有选中的状态的按钮，如果有立即停止循环，并将结果返回给flag，作为多选框不会被选中的标志。f...
前端学习——js操作form表单
x1037490413的博客
04-02 2360
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- js操作form 获取form表单对象 使用id方式：var fm=document.getElementById("fm"); 使用name属性:var frm...
jS 清除form表单
jiandan1127的博客
12-20 6361
ps : JQ在重置form时 $('#form').reset()是没有这个方法的        解决方法   document.getElementById('id').reset()   $('#id')[0].reset()
JavaScript案例-js全选和全不选.zip
02-16
这个"JavaScript案例-js全选和全不选.zip"压缩包文件聚焦于一个常见的交互功能：全选和全不选。在网页表单或数据列表中，用户经常需要一次性选择所有项或取消所有项的选择，这一功能就通过JavaScript来实现。 全选...
js实现复选框的全选和取消全选效果
10-20
JavaScript 实现复选框全选和取消全选的效果是一个常见的前端交互功能，广泛应用于数据筛选、表单提交等场景。本文将深入解析如何利用 JavaScript 和 jQuery 来完成这一功能。 首先，HTML 结构中通常会有一个全选...
Js实现复选框的全选、全不选反选功能代码实例
10-15
在网页开发中，经常需要实现复选框（checkbox）的全选、全不选以及反选功能，以便用户能够方便地批量操作。本篇将详细讲解如何使用JavaScript（Js）实现这一功能，并提供一个具体的代码实例。 首先，我们需要了解复...
js实现功能比较全面的全选和多选
10-20
在JavaScript中，全选和多选功能是常见的交互元素，常用于表单或列表中，允许用户一次性选择多个项目。本示例代码提供了一个全面的解决方案，包括全选、反选和单选的控制。以下是对该代码的详细解释： 首先，HTML...
js动态添加表格,全选和删除
mmmv390的专栏
05-21 1480
效果图: 代码:
js清除表单内数据
熊猫的博客
03-20 2561
//清空表单数据    function clearForm(id) {        var objId = document.getElementById(id);        if (objId == undefined) {            return;        }        for (var i = 0; i &lt; objId.elements.length; i...
js实现清除表单的方法
weixin_30407613的博客
05-12 301
在web项目的开发中，查询功能不可或缺。在查询表单中一般都会有两个按钮，一个是用来提交表单的查询按钮，一个是清除查询条件的清除按钮。如果查询条件 较少，自己手动写个清除表单各控件输入值的js方法也未为不可，但如果查询条件多大十几个，清除各类控件输入值的代码也几乎千篇一律，看起来未免累赘，所 以如果有一个公用方法供调用当然最好。在此需注意的一点是，重置按钮与清除按钮的功能是截然不同的，重置...
js动态添加删除表单
wangliutao1的专栏
06-27 1232
html> head> title>动态添加表单元素title> head> script language="javascript"> //以下代码是动态添加表单元素。 var elementCount = 0; //动态增加表单元素。 funct
javascript 学习 —— BOM和DOM编程学习
HUIxinbumie的博客
02-20 292
这是我的第一个博客，用来记录自己的学习历程。之前的学习会在项目下写备注，再次翻看也有些不方便。从今天开始就用博客记录吧。 一、BOM ( browser object model ) 与DOM 1.在学习DOM之前总听到BOM这个概念，什么是BOM呢？BOM全称 Browser Object Model，浏览器对象模型。 JavaScript是由浏览器中内置的j...
js表单全选和取消全选
最新发布
04-06
以下是一个实现js表单全选和取消全选的示例代码： HTML代码： ```html <form id="myForm"> <label><input type="checkbox" name="fruit" value="apple">苹果</label><br> <label><input type="checkbox" name="fruit" value="banana">香蕉</label><br> <label><input type="checkbox" name="fruit" value="orange">橙子</label><br> <label><input type="checkbox" name="fruit" value="watermelon">西瓜</label><br> <button type="button" onclick="selectAll()">全选</button> <button type="button" onclick="cancelAll()">取消全选</button> </form> ``` JavaScript代码： ```javascript function selectAll() { var checkboxes = document.getElementsByName("fruit"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } } function cancelAll() { var checkboxes = document.getElementsByName("fruit"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } } ``` 说明： 1. HTML代码中，给每个复选框元素添加了相同的name属性，表示它们属于同一组； 2. HTML代码中，分别添加了“全选”和“取消全选”两个按钮，并分别绑定了selectAll()和cancelAll()两个函数； 3. JavaScript代码中，分别实现了selectAll()和cancelAll()两个函数，用于全选和取消全选； 4. JavaScript代码中，使用document.getElementsByName()方法获取所有name属性为“fruit”的复选框元素，并使用循环遍历每个元素，设置其checked属性为true或false，从而实现全选和取消全选的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值