<!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>Huashanlin购物车模拟(javascript)</title>
<style type="text/css">
table{
background-color:#000000;
}
td{
background-color:#FFFFFF;
text-align:center;
height:30px;
}
span{
background-color:#FFFFCC;
border:#66CCFF 1px solid;
cursor:hand;
}
#Info{
float:left;
}
#btnAdd{
float:right;
background-color:#0000CC;
}
#Test{
width:900px;
}
</style>
<script type="text/javascript">
//给出填写数量的文本框
function MadeText()
{
var d=window.event.srcElement.parentElement.parentElement.rowIndex;
document.getElementById("test").rows(d).cells(2).innerHTML="<input title='填写想购买的数量,请使用合法数字字符' id='Num"+d+"' type='text' onchange='EveryCount();' >";
}
//计算单个小计
function EveryCount()
{
var index=window.event.srcElement.parentElement.parentElement.rowIndex;
var a=document.getElementById("test").rows(index).cells(1).innerText;
var b=document.getElementById("Num"+index).value;
var c=parseInt(a)*parseInt(b);
document.getElementById("test").rows(index).cells(3).innerText=c;
TotalCount();
}
//计算总计
function TotalCount()
{
var rowscount=document.getElementById("test").rows.length;
var sum=0;
for(var i=1;i<=(parseInt(rowscount)-1);i++)
{
var littecount=document.getElementById("test").rows(i).cells(3).innerText;
sum=parseInt(sum)+parseInt(littecount);
}
document.getElementById("total").innerText=sum;
}
//提交订单
function AddOrder()
{
var total=document.getElementById("total").innerText;
alert("您的订单已经提交成功，总计[ "+total+"元 ]人民币，请您核实一下，谢谢您的光临!欢迎再来!");
}
</script>
</head>
<body>
<div>请填写合法的购物数量，使用数字!</div>
<div id="Cart">
<table id="test" width="900px" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="30%">商品名称</td>
<td>单价(￥)</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>钢笔</td>
<td>23.00</td>
<td id="dd"><span title="购买商品并填写数量" id="Shopping1" onclick="MadeText();">放入购物车</span></td>
<td>0</td>
</tr>
<tr>
<td>笔记本</td>
<td>10.00</td>
<td><span title="购买商品并填写数量" id="Shopping2" onclick="MadeText();">放入购物车</span></td>
<td>0</td>
</tr>
<tr>
<td>足球</td>
<td>300.00</td>
<td><span title="购买商品并填写数量" id="Shopping3" onclick="MadeText();">放入购物车</span></td>
<td>0</td>
</tr>
</table>
</div>
<div id="Test">
<div id="Info">总计：<strong><span id="total" style="color:#FF0000; font-size:36px">0</span></strong>元</div>
<div id="btnAdd"><input name="" type="button" value="提交订单" onclick="AddOrder();" /></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Huashanlin购物车模拟(javascript)</title>
<style type="text/css">
table{
background-color:#000000;
}
td{
background-color:#FFFFFF;
text-align:center;
height:30px;
}
span{
background-color:#FFFFCC;
border:#66CCFF 1px solid;
cursor:hand;
}
#Info{
float:left;
}
#btnAdd{
float:right;
background-color:#0000CC;
}
#Test{
width:900px;
}
</style>
<script type="text/javascript">
//给出填写数量的文本框
function MadeText()
{
var d=window.event.srcElement.parentElement.parentElement.rowIndex;
document.getElementById("test").rows(d).cells(2).innerHTML="<input title='填写想购买的数量,请使用合法数字字符' id='Num"+d+"' type='text' onchange='EveryCount();' >";
}
//计算单个小计
function EveryCount()
{
var index=window.event.srcElement.parentElement.parentElement.rowIndex;
var a=document.getElementById("test").rows(index).cells(1).innerText;
var b=document.getElementById("Num"+index).value;
var c=parseInt(a)*parseInt(b);
document.getElementById("test").rows(index).cells(3).innerText=c;
TotalCount();
}
//计算总计
function TotalCount()
{
var rowscount=document.getElementById("test").rows.length;
var sum=0;
for(var i=1;i<=(parseInt(rowscount)-1);i++)
{
var littecount=document.getElementById("test").rows(i).cells(3).innerText;
sum=parseInt(sum)+parseInt(littecount);
}
document.getElementById("total").innerText=sum;
}
//提交订单
function AddOrder()
{
var total=document.getElementById("total").innerText;
alert("您的订单已经提交成功，总计[ "+total+"元 ]人民币，请您核实一下，谢谢您的光临!欢迎再来!");
}
</script>
</head>
<body>
<div>请填写合法的购物数量，使用数字!</div>
<div id="Cart">
<table id="test" width="900px" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="30%">商品名称</td>
<td>单价(￥)</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>钢笔</td>
<td>23.00</td>
<td id="dd"><span title="购买商品并填写数量" id="Shopping1" onclick="MadeText();">放入购物车</span></td>
<td>0</td>
</tr>
<tr>
<td>笔记本</td>
<td>10.00</td>
<td><span title="购买商品并填写数量" id="Shopping2" onclick="MadeText();">放入购物车</span></td>
<td>0</td>
</tr>
<tr>
<td>足球</td>
<td>300.00</td>
<td><span title="购买商品并填写数量" id="Shopping3" onclick="MadeText();">放入购物车</span></td>
<td>0</td>
</tr>
</table>
</div>
<div id="Test">
<div id="Info">总计：<strong><span id="total" style="color:#FF0000; font-size:36px">0</span></strong>元</div>
<div id="btnAdd"><input name="" type="button" value="提交订单" onclick="AddOrder();" /></div>
</div>
</body>
</html>
<script type="text/javascript">
var isClick = false;
var curObj = null; //当前点击的对象
var newValue = "";
var txt = "";
function Edit(obj)
{
if(!isClick)
{
curObj = obj;
txt = obj.innerText;
obj.innerHTML = "<input type='text' size='2' value=" + txt + " />";
isClick = true;
}else
{
newValue = curObj.firstChild.value;
curObj.innerHTML = newValue;
isClick = false;
}
}
</script>
<div id="d" ondblclick="Edit(this);">20</div>
var isClick = false;
var curObj = null; //当前点击的对象
var newValue = "";
var txt = "";
function Edit(obj)
{
if(!isClick)
{
curObj = obj;
txt = obj.innerText;
obj.innerHTML = "<input type='text' size='2' value=" + txt + " />";
isClick = true;
}else
{
newValue = curObj.firstChild.value;
curObj.innerHTML = newValue;
isClick = false;
}
}
</script>
<div id="d" ondblclick="Edit(this);">20</div>