购物车案例中拼接字符串问题
1.问题描述
添加相同的商品名之后,虽然可以进行累加,但是继续新增新的产品后。前一个商品的value属性会被重置。
function creationTd(){
// alert(goodTable);
var goodTb ="<tr>";
goodTb +="<td><input type='checkbox' class='check' οnclick='check()' /></td>"
goodTb +="<td class = 'goodsName'>"+goodsName.value+"</td>"
goodTb +="<td>"+goodsPrice.value+"</td>"
goodTb +="<td><button type='button' onclick = 'addTbGoodsNum(this)'>+</button><input placeholder='"+goodsNum.value
+"' /><button type='button'οnclick='minusTbGoodsNum(this)'>-</button></td>"
goodTb +="<td>"+goodsPrice.value*goodsNum.value+"</td>"
goodTb +="<td><button type='button' οnclick='delTbgoods(this)'>删除</button></td>"
goodTb +="</tr>"
// alert(goodTb);
//最后一步的时候一定要赋值,不然容易添加进去了,但是页面不显示
tbodyGoods.innerHTML += goodTb;
}
2.问题原因及解决办法
因为完全使用的是字符串拼接,商品的数量属性已经被写死了。所以每次重新拼接字符串的时候,会被重置。
function creationTd(){
//创建一个行标签 也可以全部用字符串拼接但是会产生一个bug(还没解决)所以就先创建一个行标签
var goodsTb = document.createElement("tr");
//创建字符串 并将第一个单元格的内容赋值给str
var str = "<td><input type='checkbox' class = 'checkBox' οnclick='checkAg()'/></td>";
//将第二个单元格的内容拼接进字符串 其中商品的名字通过id属性获取
str += "<td class = 'goodsName'>"+goodsName.value+"</td>";
//将第三个单元格的内容拼接进字符串 其中商品的价格通过id属性获取
str += "<td>"+goodsPrice.value+"</td>";
//将第四个单元格的内容拼接进字符串 其中商品的数量通过id属性获取
str += "<td><button type='button' onclick = 'addGoodsNum(this)'>+</button><input type='text' value='"+goodsNum.value+"' /><button type='button' onclick = 'minusGoodsNum(this)'>-</button></td>"
//将第五个单元格的内容拼接进字符串 其中商品的总价通过计算获取
str += "<td class = 'sum'>"+goodsPrice.value*goodsNum.value+"</td>"
//将第六个单元格的内容拼接进字符串
str += "<td><button type='button' onclick = 'delTb(this)'>删除</button></td>"
// 将拼接好的单元格串插入行中
goodsTb.innerHTML = str;
// 将行元素添加到tbody中
tbodyGoods.appendChild(goodsTb);
}