下面是我做的一个超简单的购物车，全部都是用原生射流研究…做的

钢性铸铁

样式表{ text-align :居中；}表格img { width : 50px } a { text-decoration : none；颜色：红色；} /stylebody

表格边框='1 '单元格间距='0 '和第全选输入类型=' checkbox ' id=' CKall '/th商品/th单价/th数量/th操作/th/tr/TD t车身tr t输入类型='复选框'名称=' CK '/TD/TD！[](./img 2/1。png)/TD td3/TD tdinput type=' number ' max=' 10 ' min=' 0 ' step=' 1 ' value=' 2 '/TD TDA href=' JavaScript : void(0)；'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' del '删除/a/TD/tr TRT输入类型='复选框'名称=' CK '/TD/TD！[](./img 2/2。png)/TD td3/TD tdinput type=' number ' max=' 10 ' min=' 0 ' step=' 1 ' value=' 3 '/TD TDA href=' JavaScript : void(0)；'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' del '删除/a/TD/tr TRT输入类型='复选框'名称=' CK '/TD/TD！[](./img 2/3。png)/TD td3/TD tdinput type=' number ' max=' 10 ' min=' 0 ' step=' 1 ' value=' 1 '/TD TDA href=' JavaScript : void(0)；'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' del '删除/a/TD/tr/t车身t脚tr TD col span=' 3 ' align=' right '总价：/TD TD col span=' 2 '/TD/tr/tfoot/table a href=' JavaScript : void(0)；'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' dels '删除选中项/ajs

脚本窗口。onload=function(){ document。getelementbyid(' ckAll ').onclick=function(){//当点击全选的复合框时触发事件var cks=文档。getelementsbyname(' CK ')；//获取ck对象for(var I=0；长度；i ){ //循环得到单个tr cks[i].选中=this.checked//得到的每个tr的点击都等于ckAll的点击} } var cks=文档。getelementsbyname(' CK ')；//创建ck对象for(var I=0；长度；i ){ //循环得到单个tr cks[i].onclick=function(){ //当点击每个当tr的时候都会触发点击事件for(var I=0；长度；i ){//循环得到单个td if(！cks[i].选中){ //如果单个特点的点击等于错误的就返回document.getElementById('ckAll ').选中=假；//那么ckAll就等于虚假退货；} }文档。getelementbyid(' ckAll ').选中=真；//否则就等于真实的说明为全选状态} } GetSum()；函数getSum(){ //计算的方法var t正文=文档。getelementsbytagname(' t body ')[0]；//创建tbody对象var sum=0；//先定义总额为0表示(var I=0；它的身体。孩子们。长度；i ){ //循环得到tr var tr=t车身。孩子[我]；//tbody中的子节点就是tr.children//tr的子节点是td var price=parseFloat(td[2]).innerText)；//td的第二列是价格得到价格var count=parseFloat(td[3]).儿童[0]。值);//第三列是数量总和=价格*计数；//总和就等于价格*数量td[3].儿童[0]。onblur=function(){ //当失去焦点的时候触发事件getSum()；} } var TF oot=document。getelementsbytagname(' TF oot ')[0]；//创景tfoot对象tfoot.children[0].儿童[1]。innerHTML=sum//t ootd子节点等于总和} var dels=文档。getelementsbyclassname(' del ')；//创建倒三角形对象for(var I=0；idels.lengthi ){//循环得到德尔斯[我]。onclick=function(){ this。父节点。父节点。移除()；getSum()；} }文档。getelementsbyclassname(' dels ')[0].onclick=function(){ var cks=document。getelementsbyname(' CK ')；for(var I=cks。长度-1；I=0；i - ){ if(cks[i]).选中){ cks[I]。父节点。父节点。移除()；} } GetSum()；} }/脚本效果图

这个购物车是在学习射流研究…时做的，比较简单，但基本功能还是有的：

可以全选，也可以一个一个选。您可以单独删除选定的项目。总数可以根据数量的变化而变化。你最好用在线编辑器检查一下效果。

如果有什么问题，可以随时沟通.(jQury过几天会作为购物车的例子)

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。