紧张有添加商品

增加和减少商品数量

根据增加、减少或选择的商品获取金额

简单购物车htmljavascript实现简略购物车功效有图 jQuery

实现商品价格的打算

<!DOCTYPE html>

<html>

<head>

<meta charset=\"大众UTF-8\"大众>

<title>购物车</title>

</head>

<style type=\公众text/css\公众>

h1{

text-align: center;

}

table{

margin: 0 auto;

}

body{

font-size: larger;color: crimson;

background-image: url(img/2.jpg);

background-repeat: no-repeat;

background-size: 100%;

}

table th,table td{

}

</style>

<body >

<h1>购物车:真划算</h1>

<table border=\公众1\"大众 >

<tr>

<!--文本th-->

<th>商品</th>

<th >单价</th>

<th>颜色</th>

<th>库存</th>

<th>好评率</th>

<th>操作</th>

</tr>

<tr>

<td>面膜</td>

<td >150</td>

<td>白色</td>

<td>100</td>

<td>88%</td>

<td align=\公众center\公众>

<input type=\公众button\"大众 value=\"大众加入购物车\"大众 onclick=\"大众add_shoppingcar(this)\"大众/>

</td>

</tr>

<tr>

<td>口红</td>

<td >350</td>

<td>白色</td>

<td>166</td>

<td>82%</td>

<td align=\"大众center\"大众>

<input type=\公众button\"大众 value=\"大众加入购物车\"大众 onclick=\公众add_shoppingcar(this)\公众/>

</td>

</tr>

<tr>

<td>鼠标</td>

<td >150</td>

<td>玄色</td>

<td>99</td>

<td>75%</td>

<td align=\公众center\"大众>

<input type=\公众button\"大众 value=\"大众加入购物车\"大众 onclick=\"大众add_shoppingcar(this)\"大众/>

</td>

</tr>

<tr>

<td>键盘</td>

<td >120</td>

<td>玄色</td>

<td>50</td>

<td>80%</td>

<td align=\公众center\"大众>

<input type=\"大众button\"大众 value=\"大众加入购物车\公众 onclick=\"大众add_shoppingcar(this)\公众/>

</td>

</tr>

</table>

<h1> 购物车</h1>

<table border=\公众1\公众>

<thead>

<tr>

<th>商品</th>

<th >单价</th>

<th>数量</th>

<th>金额</th>

<th>删除</th>

</tr>

</thead>

<tbody id=\"大众goods\"大众>

<!--<tr>

<td>面膜</td>

<td>150</td>

<td align=\"大众center\公众>

<input type=\"大众button\公众 value=\公众-\"大众 id=\公众jian\公众 onclick=\公众change(this,-1);\公众/>-->

<!--readonly规定输入字段为只读-->

<!--<input id=\"大众text\公众 type=\"大众text\"大众 size=\"大众1\"大众 value=\"大众1\公众 readonly=\公众readonly\"大众 />

<input type=\"大众button\公众 value=\公众+\公众 id=\"大众add\"大众 onclick=\公众change(this,1);\公众/>

</td>

<td> <input id=\公众money\公众 size=\"大众1\公众 value=\"大众80\"大众></input></td>

<td align=\"大众center\"大众>

<input type=\"大众button\"大众 value=\公众X\"大众 onclick=\"大众del(this)\"大众 />

</td>

</tr>-->

</tbody>

<tfoot>

<tr>

<td colspan=\公众3\公众 align=\公众center\"大众 >总计</td>

<td id=\公众total\公众></td>

<td>元</td>

</tr>

</tfoot>

</table>

</body>

<script type=\"大众text/javascript\公众>

//this js中指当前工具

function add_shoppingcar(btn){

var tr=btn.parentNode.parentNode;

var tds=tr.getElementsByTagName(\"大众td\"大众);

var name=tds[0].innerHTML;

var price=tds[1].innerHTML;

var tbody=document.getElementById(\公众goods\公众);

var row=tbody.insertRow();//insertRow表格开头插入新行

row.innerHTML=\"大众<td>\公众+name+\"大众</td>\"大众+

\"大众<td>\"大众+price+\"大众</td>\公众+

\公众<td align='center'>\"大众+

\"大众<input type='button' value='-' id='jian' onclick='change(this,-1)' />\"大众+

\"大众<input id='text' type='text' size='1' value='1' readonly='readonly' />\"大众+

\"大众<input type='button' value='+' id='add' onclick='change(this,1)' />\公众+

\公众</td>\"大众+

\"大众<td>\"大众+price+\"大众</td>\"大众+

\"大众<td align='center'>\公众+

\"大众<input type='button' value='X' onclick='del(this)'/>\"大众+

\公众</td>\"大众+

\"大众</tr>\公众

total();

}

//增加减少数量，用n正负1来表示点击了加减按钮

function change(btn,n){

//获取数量的三个input工具

var inputs = btn.parentNode.getElementsByTagName(\公众input\公众);

//获取原来的数量

var amount = parseInt(inputs[1].value);

//当amount=1时不能再点击\公众-\"大众符号

//用n<0来表示点击了减button

if(amount<=1 && n<0){

return;

}

//根据加减来改变数量

inputs[1].value = amount + n;

//将改变后的数量值赋值给am102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186

实现效果：