<!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>
<style type="text/css">
table tr{
text-align:center;
}
</style>
<script type="text/javascript">
<!--
var index=1;
function delAllRows()
{
var btnRow=document.getElementById("add").rowIndex;
var index=document.getElementById("table").rows;
if(btnRow!=1)
{
if(confirm("您确定要删除所有订单吗？"))
{
for(var i=index.length-1;i>0;i--)
{
if(i!=0&&i!=btnRow)
{
/*不删除标题行和按钮所在行,由于增加订单时都是在按钮前一行增加,所以按钮行是最大的下标.
*第一次进入循环i为数组最大下标,而按钮所在行正是最大下标。此时两个值相等,不执行删除.
*进入下一次循环后i递减,此时两个值不相等执行删除。标题行数组下标为0,当i递减到0的时候同样不删除.
*/
document.getElementById("table").deleteRow(index[i].rowIndex);
}
}
}
}else
{
alert("当前没有任何订单!");
}
}
function addRow()
{
var rows=document.getElementById("table");
var rowsIndex=rows.rows.length-1;
var newRow=document.getElementById("table").insertRow(rowsIndex);
var id="newRow"+index;
newRow.id=id;
var col1=newRow.insertCell(0);
col1.innerHTML="<input type=text name="+id+" value=新购买的商品 style=border-width:1px;border-color:#F00;/>";
var col2=newRow.insertCell(1);
col2.innerHTML="<input type=text name="+id+" value=5 style=border-width:1px;border-color:#F00;width:30px;/>";
var col3=newRow.insertCell(2);
col3.innerHTML="<input type=text name="+id+" value=￥16 style=border-width:1px;border-color:#F00;width:50px;/>";
var col4=newRow.insertCell(3);
col4.innerHTML="<input type=button name=btnDel id=btnDel value=删除 onclick=del("+"'"+id+"'"+")> <input type=button name=btnUpdate id=update"+index+" value=确定 onclick=save("+"'"+id+"',"+"'update"+index+"')>";
index++;
}
function del(rowId)
{
var rows=document.getElementById(rowId).rowIndex;
if(confirm("您确定要删除这条订单吗？"))
{
document.getElementById("table").deleteRow(rows);
}
}
function update(name,btn)
{
var btn1=document.getElementById(btn);
btn1.value='确定';
btn1.setAttribute("onclick","save('"+name+"','"+btn+"')");
var text1=document.getElementsByName(name);
for(var i=0;i<text1.length;i++)
{
text1[i].readOnly=false;
text1[i].style.borderWidth='1px';
}
}
function save(name,btn)
{
var text1=document.getElementsByName(name);
var btn1=document.getElementById(btn);
btn1.value='修改';
btn1.setAttribute("onclick","update('"+name+"','"+btn+"')");
for(var i=0;i<text1.length;i++)
{
text1[i].readOnly=true;
text1[i].style.borderWidth='0px';
}
}
-->
</script>
</head>
<body>
<form name="shop" action="#" method="post">
<table width="393" height="50" border="1" cellpadding="0" cellspacing="0" id="table">
<tr style="background-color:#666; color:#FFF;" id="title">
<td width="174" >商品名称</td>
<td width="42">数量</td>
<td width="58">单价</td>
<td width="109">操作</td>
</tr>
<tr id="row2">
<td><input type="text" name="text1" value="玫瑰保湿睡眠面膜" readonly="readonly" style=" border-width:0px; border-color:#F00;"/></td>
<td><input type="text" name="text1" value="5" readonly="readonly" style="border-width:0px;border-color:#F00; width:30px;"/></td>
<td><input type="text" name="text1" value="￥48" readonly="readonly" style="border-width:0px;border-color:#F00; width:50px;"/></td>
<td><input type="button" name="btnDel" id="btnDel" value="删除" onclick="del('row2')"/> <input type="button" name="btnUpdate" id="btnUpdate" value="修改" onclick="update('text1','btnUpdate')"/></td>
</tr>
<tr id="add">
<td colspan="4" align="center" ><input type="button" name="add" id="add" value="增加一条订单" onclick="addRow()" /> <input type="button" name="delAll" id="deleteAll" value="删除所有订单" onclick="delAllRows()" />
</td>
</tr>
</table>
</form>
</body>
</html>
javascript实现简易购物车(高手勿喷)
5星 · 超过95%的资源 需积分: 48 120 浏览量
2012-04-21
20:10:50
上传
评论 4
收藏 2KB RAR 举报 
shop.rar （1个子文件） 
shop.html 4KB资源评论
Sandra_7172015-10-21代码简单明了，如果再完善一点就更好了，实现了基本的功能，挺好的了
普通网友
- 粉丝: 0
- 资源: 2
