下面是模仿购物车的代码,遗憾的是,按下 删除 按钮时,会产生异常:Uncaught SyntaxError: Unexpected token }。
并且在创建表时 表的单元格没有边框。
代码如下:
<html>
<head>
<title>JS初识(3)</title>
<script>
function buy_produced(produced_name_id,produced_price_id){
//先获得商品的名称和价格
var produced_name =document.getElementById(produced_name_id);
var produced_price=document.getElementById(produced_price_id);
var produced_name_text=produced_name.innerText;
var produced_price_text=produced_price.innerText;
//得到描述购物车的表并的得到其中的HTML元素
var table_name=document.getElementById('shopping_car');
var table_str=table_name.innerHTML;
//商品数量
var produced_count=1;
//拼接列表,用节点的方式
var get_result=table_str.toString().search(produced_name_text);
if(get_result == -1){
//说明表中没有该商品
//创建tr和td和text内容
var new_tr=document.createElement('tr');
var new_td=document.createElement('td');
var new_td_text=document.createTextNode(produced_name_text);
new_td.setAttribute('id',produced_name_id);
var new_td2=document.createElement('td');
var new_td_text2=document.createTextNode(produced_price_text);
new_td2.setAttribute('id',produced_price_id);
var new_td3=document.createElement('td');
var new_td_text3=document.createTextNode(produced_count);
new_td3.setAttribute('id',produced_name_id+'_count');
new_td3.setAttribute('align','center');
var new_td4=document.createElement('td');
var new_td_text4=document.createTextNode('故障');
new_td4.setAttribute('id',produced_name_id+'_zongji');
var new_td5=document.createElement('td');
// var new_td_text5=document.createHTMLNode('<input type="button" value="删除">');
new_td5.innerHTML="<input type='button' value='删除' onclick=delete_producted(produced_name_id)/>";
new_td5.setAttribute('id',produced_name_id+'_delete');
new_td5.setAttribute('align','center');
//将tr,td和table进行拼接
new_td.appendChild(new_td_text);
new_td2.appendChild(new_td_text2);
new_td3.appendChild(new_td_text3);
new_td4.appendChild(new_td_text4);
// new_td5.appendChild(new_td_text5);
new_tr.appendChild(new_td);
new_tr.appendChild(new_td2);
new_tr.appendChild(new_td3);
new_tr.appendChild(new_td4);
new_tr.appendChild(new_td5);
table_name.appendChild(new_tr);
//不要用这种传统的字符串拼接形式。 var table_str=table_name.innerHTML;
}
else{
//说明购物车中有商品,只需要替换 产品数量的列即可
//得到要被替换的列节点
var old_node=document.getElementById(produced_name_id+'_count');
var old_node_number=parseInt(old_node.innerText);
old_node_number += 1;
//创建新的列节点
var new_td4=document.createElement('td');
var new_td_text4=document.createTextNode(old_node_number.toString());
new_td4.setAttribute('id',produced_name_id+'_count');
new_td4.setAttribute('align','center');
new_td4.appendChild(new_td_text4);
//新节点替换旧节点
old_node.parentNode.replaceChild(new_td4,old_node);
}
}
function reduce(produced_name_id){
//先获得商品的名称和价格
var produced_count =document.getElementById(produced_name_id+'_count');
var produced_count_text=produced_count.innerText;
var shopping_car=document.getElementById('shopping_car');//得到表引用
var result=parseInt(produced_count_text);
//判断该商品在购物车中是否存在
if(null==result || 0==result){
//说明没有该商品
alert('商品的数量已经为0');
}
else{
//说明有该商品,数量要减少一 produced_name_id+'_count'
//得到原来的单元格
var old_Node = document.getElementById(produced_name_id+'_count');
var old_Node_text=parseInt(old_Node.innerText);
//创建新的单元格
var new_Node=document.createElement('td');
var new_Node_text=document.createTextNode(old_Node_text-1);
new_Node.setAttribute('id',produced_name_id+'_count');
new_Node.setAttribute('align','center');
new_Node.appendChild(new_Node_text);
//替换单元格
old_Node.parentNode.replaceChild(new_Node,old_Node);
}
}
function delete_producted(produced_name_id){
var msg='删除这条数据';
if(confirm(msg)==true){
var shopping_car=document.getElementById('shopping_car');//得到表引用
//获取商品所在的tr元素
var producted_row=document.getElementById(produced_name_id+'_row');
shopping_car.delete(producted_row);
}
else{
return;
}
}
function choose_all(){
//先得到全选框的标签
var result=document.getElementById('choose_all');
//判断复选框的状态
if(result.checked){
//当复选框被勾选的时候,判断复选框的状态为true
//得到其他复选框的引用
var other_produced_list = document.getElementsByClassName('produced');
for(var produced in other_produced_list){
other_produced_list[produced].checked=true;
}
}
else{
var other_produced_list = document.getElementsByClassName('produced');
for(var produced in other_produced_list){
other_produced_list[produced].checked=false;
}
}
}
</script>
</head>
<body>
<center>
<!--创建商品表-->
<table style="border:1px solid #9999FF;background:#33FFFF">
<caption><b>商品表</b></caption>
<tr>
<th>
全选<input id ="choose_all" type="checkbox" onclick="choose_all()"/>
</th>
<th>商品名</th>
<th>价格(单价)</th>
<th>调节数量</th>
<th>操作</th>
</tr>
<tr id="yingyangkuangxian_row">
<td>
<input id="choose_1" class="produced" type="checkbox"/>
</td>
<td id="yingyangkuangxian">
营养快线
</td>
<td id="yingyangkuangxianPrice">
3元
</td>
<td>
<input type="button" value="-" onclick="reduce('yingyangkuangxian')"/>
1
<input type="button" value="+" onclick="buy_produced('yingyangkuangxian','yingyangkuangxianPrice')"/>
</td>
<td>
<input type="button" value="购买" onclick="buy_produced('yingyangkuangxian','yingyangkuangxianPrice')"/>
</td>
</tr>
<tr id="anmuxi_row">
<td>
<input id="choose_2" class="produced" type="checkbox"/>
</td>
<td id="anmuxi">
安慕希
</td>
<td id="anmuxiPrice">
8元
</td>
<td>
<input type="button" value="-" onclick="reduce('anmuxi')"/>
1
<input type="button" value="+" onclick="buy_produced('anmuxi','anmuxiPrice')"/>
</td>
<td>
<input type="button" value="购买" onclick="buy_produced('anmuxi','anmuxiPrice')"/>
</td>
</tr>
<tr id="meinianda_row">
<td>
<input id="choose_3" class="produced" type="checkbox"/>
</td>
<td id="meinianda">
美年达
</td>
<td id="meiniandaPrice">
3元
</td>
<td>
<input type="button" value="-" onclick="reduce('meinianda')"/>
1
<input type="button" value="+" onclick="buy_produced('meinianda','meiniandaPrice')"/>
</td>
<td>
<input type="button" value="购买" onclick="buy_produced('meinianda','meiniandaPrice')"/>
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" value="批量购买"/>
</td>
</tr>
</table>
<br/><br/><br/><br/>
<table id="shopping_car" style="border:1px solid #9999FF;background:#33FFFF;align:center">
<caption><b>购物车</b></caption>
<tr>
<th>商品名</th>
<th>价格</th>
<th>数量</th>
<th>总计</th>
<th>操作</th>
</tr>
</table>
</center>
</body>
</html>
程序演示如图: