在style.css里添加下面样式
.goods_cut {
background: url("../images/plus.gif") no-repeat scroll 0 0 transparent
border: 0 none
cursor: pointer
display: block
float: left
font-size: 0
height: 15px
line-height: 0margin: 8px 3px 0
width: 15px
}
input.goodsBuyBox, input.number {
border: 1px solid #DDDDDD
float: left
font-size: 10px
height: 18px
line-height: 18px
margin: 5px 6px 0
padding: 0
text-align: center
width: 32px
}
.goods_add {
background: url("../images/plus.gif") no-repeat scroll 0 -15px transparent
border: 0 none
cursor: pointer
display: block
float: left
font-size: 0
height: 15px
line-height: 0
margin: 8px 3px 0
width: 15px
}
在flow.dwt里，看各自的模板去修改，总之要找到这串代码：
<input type="text" name="goods_number[{$goods.rec_id}]" ……
下面是脚本，放进flow.dwt里
<script language="javascript" type="text/javascript">
function goods_cut($val){
var num_val=document.getElementById('number'+$val)
var new_num=num_val.value
if(isNaN(new_num)){alert('请输入数字')return false}
var Num = parseInt(new_num)
if(Num>1)Num=Num-1
num_val.value=Num
document.getElementById('updatecart').click()
}
function goods_add($val){
var num_val=document.getElementById('number'+$val)
var new_num=num_val.value
if(isNaN(new_num)){alert('请输入数字')return false}
var Num = parseInt(new_num)
Num=Num+1
num_val.value=Num
document.getElementById('updatecart').click()
}
</script>
找到
<input type="text" name="goods_number[{$goods.rec_id}]"
搜索不到你就搜goods_number就行了
替换为：
<span class="goods_cut" onclick="goods_cut('{$goods.rec_id}')"></span>
<input type="text" name="goods_number[{$goods.rec_id}]" id="number{$goods.rec_id}" value="{$goods.goods_number}" size="4" class="number" onblur="if(isNaN(this.value)){alert('请输入数字')return false}else{document.getElementById('updatecart').click()}" title="{$lang.goods_number_tip}"/>
<span class="goods_add" onclick="goods_add('{$goods.rec_id}')"></span>
找到
<input name="submit" type="submit" value="{$lang.update_cart}" class="btn_s3"/>
其实就是更新购物车的按钮
添加一个id=“updatecart”
<input name="submit" type="submit" id="updatecart" value="{$lang.update_cart}" class="btn_s3"/>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>修改订单</title>
<style type="text/css">
body{
font-size:13px
line-height:25px
}
table{
border-top: 1px solid #333
border-left: 1px solid #333
width:400px
}
td{
border-right: 1px solid #333
border-bottom: 1px solid #333
text-align:center
}
.title{
font-weight:bold
background-color: #cccccc
}
input text{
width:100px
}
</style>
<script type="text/javascript">
function addRow(){
//行的长度
var rowlength=document.getElementById("order").rows.length
//得到整个表格对象
var order = document.getElementById("order").insertRow(rowlength-1)
order.id=rowlength-1
//插入列
var cel1=order.insertCell(0).innerHTML="游戏光盘"
var cel2=order.insertCell(1).innerHTML="34"
var cel3=order.insertCell(2).innerHTML="¥58.40"
var cel4=order.insertCell(3).innerHTML="<input type=\"button\"value=\"删除\" onclick=\"delRow('"+(rowlength-1)+"')\"/>"+ "<input type=\"button\"value=\"修改\" onclick=\"editRow('"+(rowlength-1)+"')\"/>"
}
function delRow(qwe){
var ewq=document.getElementById(qwe).rowIndex
document.getElementById("order").deleteRow(ewq)
}
function editRow(rowID){
var row=document.getElementById(rowID)
var cel=row.cells
var text=cel[1].innerHTML
cel[1].innerHTML="<input type='text' value='"+text+"' style='width:40px'>"
cel[3].lastChild.value="确定"
cel[3].lastChild.setAttribute("onclick","update('"+rowID+"')")
}
function update(qwe){
var row=document.getElementById(qwe)
var cel=row.cells
var text=cel[1].lastChild.value
cel[1].innerHTML=text
cel[3].lastChild.value="修改"
cel[3].lastChild.setAttribute("onclick","editRow('"+qwe+"')")
}
/*
function add(){
var a = document.getElementById("order").rows.length
var b = document.getElementById("order").insertRow(a-1)
var one1 = b.insertCell(0).innerHTML="123"
}
*/
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="order">
<tr class="title">
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="1">
<td>防滑真皮休闲鞋</td>
<td>12</td>
<td>¥568.50</td>
<td><input name="rowdel" type="button" value="删除" onclick='delRow("1")' />
<input id="edit1" type="button" value="修改" onclick='editRow("1")' /></td>
</tr>
<tr>
<td colspan="4" style="height:30px">
<input name="addOrder" type="button" value="增加订单" onclick="addRow()" /></td>
</tr>
</table>
</body>
</html>
这个是我原来上学的时候练习的代码，练习的是基础的jsDOM操作，不过建议以后用Jquery 比较方便 有什么不懂得可以问我
每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：
所以百度了一下前端使用css实现这个效果，然后就自己就照葫芦画瓢的写了一个小小的demo，完全当作学习了一把。
在界面上，我是参考了图片上的界面，写的css，然后在美团上面扒的数据。完成后的界面如下图：
开始想着只是做一个简单的实现效果，界面上只有div框，按钮什么的这些，反正想着很丑的界面，但是自己看到饿了么这么好看的界面，自己就忍不住模仿着写了一下下。
主要用到的是移动端适配方案：flexible.js + rem的方案
首先获取到页面上所有按钮，然后给按钮添加点击事件，获取到点击当前按钮的位置坐标信息
方案一：使用定位+transition的方式实现
方案二：使用transform + transition的方式实现
其实还可以使用css的animate来实现，只不过由于需要动态计算目标位置的坐标，实现起来比较困难，所以我就没有写，如果目标位置的坐标值固定，那么可以通过animate改变top、left或者translateX、translateY的值来实现这个效果，垂直方向的动画使用贝塞尔曲线的 function-timing 。
初识CSS抛物线动画
https://github.com/HyFun/CSS-Sample-ElemeAnimate
