先放我做好的效果圖。html和CSS已經弄出來了，但不懂javascript。修改后的數據直接通過后臺php修改到mysql，若成功則直接返回數據到庫存的td單元格。然后是我的html代碼。<tr id="3308">
<td><img src="/1369118039-3308.jpg!w120" /></td>
<td><strong>3308</strong></td>
<td><span>3.97</span> M3</td>
<td><span>2950.00</span> 元</td>
<td>2013-05-21 14:36:20</td>
<td><input type="text" placeholder="輸入庫存數"></input></td>
<td><a class="button small success">保存修改</a></td></tr>求兄弟們能給個詳細點的答案，實在是不懂javascript啊，整個頁面就差這一個功能實現了。另外，這樣的表格有長長一列，我可以用php循環生成動態html標簽id的。感謝感謝！
2 回答
慕容森
TA貢獻1853條經驗 獲得超18個贊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.9.1.min.js"></script>
<style type="text/css">
table{border-collapse:collapse}
td{border:1px #CCC solid;padding:5px;font-size:12px}
a{color:#069;text-decoration:none}
a:hover{color:#C00;text-decoration:underline}
a.button{display:block;border:1px #693 solid;background:#9C6;padding:4px;color:#FFF}
a.success{border-color:#369;background:#69C}
input{font-size:12px;border:1px #999 solid;padding:4px;width:40px;text-align:center}
</style>
</head>
<body>
<table id="dataList">
<tr>
<td><strong>3308</strong></td>
<td><span>3.97</span> M3</td>
<td><span>2950.00</span> 元</td>
<td>2013-05-21 14:36:20</td>
<td>
<span>庫存 0 套</span>
<input style="display:none;" type="text" value="0" />
</td>
<td><a href="#" class="button small" rel="2">修改庫存</a></td>
</tr>
<tr>
<td><strong>3308</strong></td>
<td><span>3.97</span> M3</td>
<td><span>2950.00</span> 元</td>
<td>2013-05-21 14:36:20</td>
<td>
<span>庫存 0 套</span>
<input style="display:none;" type="text" value="0" />
</td>
<td><a href="#" class="button small" rel="1">修改庫存</a></td>
</tr>
</table>
<script type="text/javascript">
$("#dataList a").click(function(){
var a=$(this),td=a.parent().prev(),s=td.children('span'),i=td.children('input');
if($.trim(a.text())=='修改庫存'){
a.text('保存修改').addClass('success');
s.hide();
i.show();
}else{
$.post('save.php',{id:a.attr('rel'),num:i.val()},function(r){
alert(r.msg);
if(r.status){
s.html('庫存 '+r.num+' 套');
a.text('修改庫存').removeClass('success');
s.show();
i.hide()
}
},'JSON')
}
return false
})
</script>
</body>
</html>
上面是html頁面，下面是php
<?php
header("Content-type: text/html; charset=utf-8");
$r = array(
'msg' => '錯誤！',
'status' => FALSE,
'num' => 0
);
if(isset($_POST['id']) && isset($_POST['num'])){
if(is_numeric($_POST['id']) && is_numeric($_POST['num'])){
$id = (int)$_POST['id'];
$num = (int)$_POST['num'];
$r['msg'] = '修改成功！';
$r['num'] = $num;
$r['status'] = TRUE;
}else{
$r['msg'] = '錯誤！[2]';
}
}else{
$r['msg'] = '錯誤！[1]';
}
echo json_encode($r);
?>
縹緲止盈
TA貢獻2041條經驗 獲得超4個贊
$(document).ready(function() {
//為每一個具有相同id=cartUpdate 的 添加click事件
$("#cartUpdate").live("click",function(){
var text=$(this).text();
if(text=="修改數量"){
var count = $(this).parent().prev().text();
$(this).parent().prev().html("<input style='width:35px' min=1 type='number' value="+count +" />");
$(this).text("確定");
}else if(text=="確定"){
var count2 = $(this).parent().prev().children().val();
var id = $(this).parent().prev().prev().prev().prev().text();
$.post("/cart/update", {
"productId" : id,"count":count2
}, function(data) {
if(data=="ok"){
$("#p" + id).next().next().next().text(count2);
$("#p" + id).nextAll().find("button").text("修改數量");
}else{
alert("修改失敗");
}
});
}
});
- 2 回答
- 0 關注
- 529 瀏覽
添加回答
舉報
0/150
提交
取消