简易购物车案例中拼接字符串问题

购物车案例中拼接字符串问题

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);
		}