已解决该问题，没法删除，写个标题~~~ 感兴趣的可以看看我js代码的注释，适合新手小白看看，全选有个错误
qq_安莜_04255791
2017-12-23 11:28
和老师做的一样，单行选择之前的功能都可以实现，粘了老师的代码都不对，在数量框中写超过1的数字，并且点击多次才可以实现单行删除功能，点击一次没反应，有人遇到这种状况吗？本人IE浏览器，HBuilder编写
4回答
-
- qq_安莜_04255791
- 2017-12-23 14:18:57
全选里面错误：if(tr[i].checked)=>if(input.checked)
-
- qq_安莜_04255791
- 2017-12-23 11:44:34
上面的var deleteAll=document.getElementById("deleteAll");被我注释了，但是不注释也出不来效果，问题还是一样，，，，
-
- qq_安莜_04255791
- 2017-12-23 11:42:09
我的html源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/shopping_car.css" />
<script type="text/javascript" src="js/shopping_car.js" ></script>
</head>
<body>
<table id="cartTable">
<thead>
<tr>
<th><label><input type="checkbox" class="check_all check" />全选</label></th>
<th class="goods">商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="checkbox"><input type="checkbox" class="check_one check"/></td>
<td class="goods"><img src="img/博美.jpg" alt="博美"/><span>博美</span></td>
<td class="price">200.88</td>
<td class="count">
<span class="reduce"></span>
<input class="count_input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">200.88</td>
<td class="operation"><span>删除</span></td>
</tr>
<tr class="">
<td class="checkbox"><input type="checkbox" class="check_one check"/></td>
<td class="goods" ><img src="img/哈士奇.jpg" alt="哈士奇"/><span>哈士奇</span></td>
<td class="price">500.66</td>
<td class="count">
<span class="reduce"></span>
<input class="count_input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">500.66</td>
<td class="operation"><span>删除</span></td>
</tr>
<tr class="">
<td class="checkbox"><input type="checkbox" class="check_one check"/></td>
<td class="goods"><img src="img/斗牛.png" alt="斗牛"/><span>斗牛</span></td>
<td class="price">600</td>
<td class="count">
<span class="reduce"></span>
<input class="count_input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">600</td>
<td class="operation"><span>删除</span></td>
</tr>
<tr class="">
<td class="checkbox"><input type="checkbox" class="check_one check"/></td>
<td class="goods"><img src="img/柴犬.jpg" alt="柴犬"/><span>柴犬</span></td>
<td class="price">200</td>
<td class="count">
<span class="reduce"></span>
<input class="count_input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">200</</td>
<td class="operation"><span>删除</span></td>
</tr>
<tr class="">
<td class="checkbox"><input type="checkbox" class="check_one check"/></td>
<td class="goods"><img src="img/萨摩耶.jpg" alt="萨摩耶"/><span>萨摩耶</span></td>
<td class="price">400</td>
<td class="count">
<span class="reduce"></span>
<input class="count_input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">400</td>
<td class="operation"><span>删除</span></td>
</tr>
<tr class="">
<td class="checkbox"><input type="checkbox" class="check_one check"/></td>
<td class="goods"><img src="img/金毛.jpg" alt="金毛"/><span>金毛</span></td>
<td class="price">500</td>
<td class="count">
<span class="reduce"></span>
<input class="count_input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">500</td>
<td class="operation"><span>删除</span></td>
</tr>
<tr class="">
<td class="checkbox"><input type="checkbox" class="check_one check"/></td>
<td class="goods"><img src="img/阿拉斯加.jpg" alt="阿拉斯加"/><span>阿拉斯加</span></td>
<td class="price">700</td>
<td class="count">
<span class="reduce"></span>
<input class="count_input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">700</td>
<td class="operation"><span>删除</span></td>
</tr>
<tr class="">
<td class="checkbox"><input type="checkbox" class="check_one check"/></td>
<td class="goods"><img src="img/雪纳瑞.png" alt="雪纳瑞"/><span>雪纳瑞</span></td>
<td class="price">900</td>
<td class="count">
<span class="reduce"></span>
<input class="count_input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">900</td>
<td class="operation"><span>删除</span></td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<label class="select_all"><input class="check_all check" type="checkbox"/><span>全选</span></label>
<a class="delete" id="deleteAll" href="javascript:;">删除</a>
<div class="fr closing">结算</div>
<div class="fr total">合计：¥<span id="priceTotal">0.00</span></div>
<div class="fr selected" id="selected">
已选商品
<span id="selectedTotal">0</span>件
<span class="arrow up">︽</span>
<span class="arrow down">︾</span>
</div>
<div class="selected-view">
<div id="selectedViewList" class="clearfix">
<!--<div><img src="images/1.jpg"><span>取消选择</span></div>-->
</div>
<span class="arrow">●<span>●</span></span>
</div>
</div>
</body>
</html>
我的js源代码：
window.onload=function(){
//兼容IE，因为IE不支持getElementByClassName
if(!document.getElementsByClassName){
document.getElementsByClassName=function(cls){
var ret=[];
var els=document.getElementsByTagName("*");
for(var i=0;i<els.length;i++){
var txt=els.className.split(" ");
for(var j=0;j<txt.length;j++){
//三个===是绝对相等，类型和值都相等；两个==是值相等，对比的时候会自动转换类型
if(txt[j]===cls){
ret.push(els[i]);//传出的一定是筛选后的classname
}
}
}
return ret;
}
}
var cartTable=document.getElementById("cartTable");
//cartTable.chilren获取对应ID下的子节点，rows是表格中特有属性，存放该节点下所有tr元素
var tr=cartTable.children[1].rows;
var checkInput=document.getElementsByClassName("check");
var checkAllInput=document.getElementsByClassName("check_all");
var selectedTotal=document.getElementById("selectedTotal");
var priceTotal=document.getElementById("priceTotal");
//小计
function getSubTotal(tr){
var tds=tr.cells;
var price=parseFloat(tds[2].innerHTML);
var count=parseInt(tr.getElementsByTagName("input")[1].value);
var SubTotal=parseFloat(price*count);
tds[4].innerHTML=SubTotal.toFixed(2);
}
//计算
function getTotal(){
var selected=0;
var price=0;
var HTMLstr="";//创建一个空的字符串，用来存放字符串
for(var i=0;i<tr.length;i++){
if(tr[i].getElementsByTagName("input")[0].checked==true){//checked是判断是否被选中，如果选中，值为true，反之false
selected+=parseInt(tr[i].getElementsByTagName("input")[1].value);
//cells也是表格特殊属性，用于取节点的所有td
price+=parseFloat(tr[i].cells[4].innerHTML);
//选中后背景有颜色
tr[i].className="on";
//点击之后显示下面的图片,把此处的src写成tr对应下的src，用index属性存放是第几行
HTMLstr+='<div class="divchange"><img class="imgchange" src="'+tr[i].getElementsByTagName('img')[0].src+'"/><sapn class="del" index="'+i+'">取消选择</span></div>';
}else{//取消选中后背景无颜色
tr[i].className="";
}
}
selectedTotal.innerHTML=selected;
priceTotal.innerHTML=price.toFixed(2);//toFixed显示两位小数
selectedViewList.innerHTML=HTMLstr;//把ID为selectedViewList的div里面的值替换为HTMLstr里面的值
if(selected==0){//商品没有被选中浮层也自动隐藏
foot.className="foot";
}
}
for(var i=0;i<checkInput.length;i++){
checkInput[i].onclick=function(){
//设置全选都选上
if(this.className=="check_all check"){
for(var j=0;j<checkInput.length;j++){
checkInput[j].checked=this.checked;
}
}//又一个不选取消全选
if(this.checked==false){
for(var k=0;k<checkAllInput.length;k++){
checkAllInput[k].checked=false;
}
}
//全部选上显示全选
var t = 0
for(var x=0;x<checkInput.length;x++){
if(checkInput[x].checked==true){
t++;
}
}
if(t==(checkInput.length-checkAllInput.length)){
for(var z=0;z<checkAllInput.length;z++){
checkAllInput[z].checked = true;
}
}
getTotal();
}
}
//控制下方图片出现隐藏
var selected=document.getElementById("selected");
var arrow_up=document.getElementsByClassName("arrow up");
var arrow_down=document.getElementsByClassName("arrow down");
var foot=document.getElementById("foot");
var selectedViewList=document.getElementById("selectedViewList");
var spandown=document.getElementsByClassName("spandown");
var divchange=document.getElementsByClassName("divchange");
// var deleteAll=document.getElementById("deleteAll");
selected.onclick=function(){
if(foot.className=="foot"){
if(selectedViewList.innerHTML!=0){//如果没有选择商品，那么下面的div隐藏
foot.className="foot show";
}
}else{
foot.className="foot";
}
}
selectedViewList.onclick=function(e){
//兼容IE
//还可以写成e=e||window.event;如果逻辑或前面为真，则取前；若前面为假，则取后面（前后都假，也取后）。
if(e){
e=e;
}else{
e=window.event;
}
//触发当前事件的原对象，srcElement是IE下的属性，target是火狐下的属性
var el=e.srcElement;
if(el.className=="del"){
//getAttribute获得元素下指定属性的属性值
var index=el.getAttribute("index");
var input=tr[index].getElementsByTagName("input")[0];
input.checked=false;
// selected.onclick();//点击取消商品，商品图片隐藏，这个是错误的，不能直接调用！！！
input.onclick();//点击取消商品，数字也跟着变化
}
}
//计算框
for(var i=0;i<tr.length;i++){
tr[i].onclick=function(e){
var el=e.srcElement;
var cls=el.className;
var input=this.getElementsByTagName("input")[1];
var val=parseInt(input.value);
var reduce=this.getElementsByTagName("span")[1];
switch(cls){
case "add":
input.value=val+1;
reduce.innerHTML="-";
getSubTotal(this);
break;
case "reduce":
if(input.value>1){
input.value=val-1;
}
if(input.value<=1){
reduce.innerHTML="";
}
getSubTotal(this);
break;
case "operation":
var conf = confirm('确定要删除吗？');
if (conf) {
this.parentNode.removeChild(this);
}
break;
default:
break;
}
getTotal();
}
tr[i].getElementsByTagName("input")[1].onkeyup=function(){
var val=parseInt(this.value);
var tr=this.parentNode.parentNode;
var reduce=tr.getElementsByTagName("span")[1];
if(isNaN(val)||val<1){//防止为空和输入除数字之外的字符
val=1;
}
this.value=val;
if(val<=1){
reduce.innerHTML="";
}else{
reduce.innerHTML="-";
}getSubTotal(tr);//parentNode是取选中元素的父节点
getTotal(tr);
}
deleteAll.onclick=function(){
if (selectedTotal.innerHTML != '0') {
var conf=confirm("确定删除这些吗？");
if(conf){
for(var i=0;i<tr.length;i++){
var input=tr[i].getElementsByTagName("input")[0];
if(tr[i].checked){
tr[i].parentNode.removeChild(tr[i]);
i--;
}
}
}
}
}
checkAllInput[0].checked = true;//默认全选
checkAllInput[0].onclick();
}
}
-
- qq_安莜_04255791
- 2017-12-23 11:39:59
全选删除也有提示，但是也无法实现商品删除，，，是我浏览器问题，还是其他的什么，，，新手小白求指导
用JS实现购物车特效
43235 学习 · 167 问题
相似问题