在网页中实现动态添加物品的效果.
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
th {
background-color:#eee;
}
</style>
<script type="text/javascript">
</script>
<script type="text/javascript">
/*定义事件时,若传入this,它是本次触发事件的对象*/
//调用该函数时传入了this,它就是正在单击的按钮对象,需要声明参数
//来接收此对象.即obj=this=正在点的按钮.
function add_shoppingcart(btn){
//获取btn所在的行。
var tr = btn.parentNode.parentNode;
//获取btn下的所有列
var tds = tr.children;
//获取商品名称
var name = tds[0].innerHTML;
//获取商品价格
var price = parseInt(tds[1].innerHTML);
console.log(name+":"+price);
//创建一个新的行
var ntr = document.createElement("tr");
ntr.innerHTML =
'<td>'+name+'</td>'+
'<td>'+price+