请教一下，怎么显示如图中(E=A+B-C-D）的效果呀
(82.19 KB)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www. >
<head>
<title>Jquery表格</title>
<script Language="JavaScript">
function CheckForm()
{
if(document.save.addtime.value=="")
{ alert("日期不能为空！");
document.save.addtime.focus();
return (false);
}
return true;
}
function sendForm()
{
if(CheckForm())
document.save.submit();
}
</script>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="js/mycommon.js"></script>
<!--jquery操作表格-->
<script type="text/javascript">
function CalculatorMoney(weight,rate)
{
var vResult=0.00;
if(rate==0)
{
return 0.00;
}
// var vweight=Math.round(parseFloat(weight));//重量四舍五入
var vweight=parseFloat(weight);
// vResult=Math.floor(vweight*parseFloat(rate));//计算重量*费率,然后去掉小数
vResult=vweight*parseFloat(rate);
if(isNaN(vResult))//如果是NaN说明有问题，清空结果
{
vResult="";
}
return vResult;
}
function getDate()
{
var d,s,t;
d=new Date();
s=d.getFullYear().toString(10)+"-";
t=d.getMonth()+1;
s+=(t>9?"":"0")+t+"-";
t=d.getDate();
s+=(t>9?"":"0")+t+" ";
t=d.getHours();
s+=(t>9?"":"0")+t+":";
t=d.getMinutes();
s+=(t>9?"":"0")+t+":";
t=d.getSeconds();
s+=(t>9?"":"0")+t;
return s;
}
function AddRow()
{
var v=$("#tbin");//得到表格的jquery对象
//所有的数据行有一个.MyRow的Class，得到数据行的大小;
var vcount=$("#tbin tr").filter(".MyRow").size()+1;//表格有多少个数据行;
var vTr=$("#tbin #trDataRow1");
var vTrClone=vTr.clone(true);
vTrClone.attr("id",vcount);
vTrClone.appendTo(v);//把vtr对象添加到表格
vTxtId=vTrClone.find("#txtID"); //找到序号文本框对象
vTxtId.val(vcount); //设置文本框的序号;
vtxtCount=vTrClone.find("#txtCount"); //件数
// vtxtCount.val(0);
vtxtWeight=vTrClone.find("#txtWeight"); //重量
// vtxtWeight.val(0);
vtxtMoneyWeight=vTrClone.find("#txtMoneyWeight"); //收汇金额
// vtxtMoneyWeight.val(0);
vselReceiver=vTrClone.find("#selReceiver option"); //收货人
var vOptionObj=vselReceiver[0];//jquery对象转换为dom对象
var vOption=$(vOptionObj);
vOption.attr("selected", true);
vtxtRate=vTrClone.find("#txtRate");
vtxtRate.val("");
vtxtMoney=vTrClone.find("#txtMoney");
vtxtMoney.val("");
vtxtDate=vTrClone.find("#txtDate");
vtxtDate.val(getDate());
vtxtDate.attr("readonly","true");
vNumber=vTrClone.find("#txtNumber");
vNumber.val("");
vDivMessage=vTrClone.find("#divMessage");
vDivMessage.html("");
vSpecialText=vTrClone.find("#txtSpecial_Remark");
vSpecialText.val("");
var domvNumber=vNumber[0];//jquery对象转换为dom对象
domvNumber.focus();
}
function UpdateTotal()//更新总金额
{
var vTotalMoney=0;//总金额的初始值为0;
var vTable=$("#tbin");//得到表格的jquery对象
var vTotal= vTable.find("#txtTotal") ;//得到总金额对象
var vtxtAfters=vTable.find("#txtMoney");//得到所有的费用对象;
vtxtAfters.each(
function(i)
{
var vTempValue=$(this).val();
if(vTempValue=="")
{
vTempValue=0;
}
vTotalMoney=vTotalMoney+parseFloat(vTempValue);
}
)//遍历结束
vTotal.val(vTotalMoney);
}
function MyKeyDown()
{
switch (event.keyCode)
{
case 13: //回车键
event.keyCode='9';
break;
case 37: //左箭头 shift+tab
var vcurrent=$(this);// 当前对象
var vid=vcurrent.attr("id");
if(vid=="txtNumber")
{
return;
}
else
var vMy=vcurrent.parent().prev().find(":first-child");
{
var vSel=vMy[0];
vSel.focus();
break;
}
case 38: //上箭头
var vcurrent=$(this);// 当前对象
var vid=vcurrent.attr("id");
var vTr=vcurrent.parent("td").parent("tr");//得到父tr对象;
var vTrSel=vTr.prev();
if(vid!="selReceiver" && vTrSel!=null && vTrSel.attr("id")!="trHead")
{
var vText="#"+vid;
var vTxt=vTrSel.find(vText);
if(vTxt!=null)
{
var vSel=vTxt[0];
vSel.focus();
}
}
break;
case 39:
event.keyCode='9';
//右箭头
break;
case 40://下箭头
var vcurrent=$(this);// 当前对象
var vid=vcurrent.attr("id");
var vTr=vcurrent.parent("td").parent("tr");//得到父tr对象;
var vTrSel=vTr.next();
if(vid!="selReceiver" && vTrSel!=null && vTrSel.html()!=null)
{
var vText="#"+vid;
var vTxt=vTrSel.find(vText);
if(vTxt!=null)
{
var vSel=vTxt[0];
vSel.focus();
}
}
break;
}
}
</script>
<!--表格操作js结束-->
<style type="text/css">
.buttonwhite_60_23
{
background-image:url(Images/buttonwhite_60_23.gif );
cursor:hand;
height:23px;
width:60px;
border:0px solid black;
FONT-SIZE: 12px;
COLOR: #313031;
FONT-FAMILY: 宋体;
padding-top:2px;
}
.inputText
{
border-width: thin;
border-color: silver ;
color:#0f619d;
font-size :13px;
height:20px;
border-bottom-width:1px;
border-left-width:1px;
border-right-width:1px;
border-top-width:1px;
border-style:solid;
background-color:transparent;
text-align :right
}
.inputLeft
{
border-width: thin;
border-color: silver ;
color:#0f619d;
font-size :13px;
height:20px;
border-bottom-width:1px;
border-left-width:1px;
border-right-width:1px;
border-top-width:1px;
border-style:solid;
background-color:transparent;
}
.HeadStyle
{
background-color:#0f619d;
color:#FFFFFF;
font-weight : bold;
font-size :15px;
height:25px;
text-align : center;
border-color: #CFDCEF;
border-bottom-width:1px;
border-left-width:1px;
border-right-width:1px;
border-top-width:1px;
border-style:solid;
}
.RowStyle
{
background-color:#f8fbfc;
color:#2D6FA9;
font-weight : normal;
font-size :12px;
height:20px;
text-align : Left;
}
.MyRow
{
background-color:#f8fbfc;
color:#2D6FA9;
font-weight : normal;
font-size :12px;
height:20px;
text-align : Left;
}
.tableRow
{
border-color: #CFDCEF;
border-bottom-width:1px;
border-left-width:1px;
border-right-width:1px;
border-top-width:1px;
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<center>
<form name="save" method="post" action="">
<table cellpadding="0" cellspacing="0" border="0" id="TABLE1" width="98%">
<tr >
<td >
<table id="tbin" border="1" bordercolor="#CBDFF2" style="border-collapse:collapse" width="100%" class="tableRow">
<!--表头开始-->
<tr id="trHead" class="HeadStyle" >
<td align="center">序号</td><td align="center">日期</td><td align="center">摘要</td>
<td align="center">收汇金额(USD)</td><td align="center">银行汇率</td><td align="center">折人民币(RMB)</td>
<td align="center">扣已汇款项(RMB)</td>
<td align="center">扣费用(RMB)</td>
<td align="center">余额</td>
<td align="left">操作</td>
</tr>
<!--表头结束-->
<tr >
<td align="center"></td><td align="center"></td><td align="center"></td>
<td align="center"></td><td align="center"></td><td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"><input name="jine" type="text" value="" id="jine" style="width:90px;" class="inputText" /></td>
<td align="left"></td>
</tr>
<!--第一行数据-->
<tr id="trDataRow1" class="MyRow">
<td id="tc1" align="center">
<input name="txtID" type="text" value="1" id="txtID" style="width:20px;" class="inputText"/>
</td>
<td id="tc2" align="center">
<input name="txtDate" type="text" id="txtDate" style="width:120px;" class="inputText"/>
</td>
<td id="tc3" align="center">
<input name="txtNumber" type="text" id="txtNumber" style="width:80px;" class="inputLeft"/>
<div id="divMessage" style="color:red"></div>
</td>
<td id="tc6" align="center">
<input name="txtMoneyWeight" type="text" id="txtMoneyWeight" value="" style="width:70px;" class="inputText"/>
<!--收汇金额-->
</td>
<td id="td8" align="center">
<input name="txtRate" type="text" id="txtRate" style="width:70px;" class="inputText"/>
<!--费率-->
</td>
<td id="td9" align="center">
<input name="txtMoney" type="text" id="txtMoney" value="" style="width:70px;" class="inputText" />
<!--折人民币-->
</td>
<td id="tc4" align="center">
<input name="txtCount" type="text" id="txtCount" style="width:70px;" class="inputText"/>
<!--扣已汇款项-->
</td>
<td id="tc5" align="center">
<input name="txtWeight" type="text" id="txtWeight" style="width:70px;" class="inputText"/>
<!--扣费用-->
</td>
<td id="td10" align="center">
<input name="txtSpecial_Remark" type="text" id="txtSpecial_Remark" style="width:90px;" class="inputText" value="" />
<!--余额-->
</td>
<td id="tcDel" align="center">
<input type="button" name="btnDel" value="删除" id="btnDel" class="buttonwhite_60_23"
/>
</td>
</tr>
<!--第一行数据结束-->
<!--统计行开始-->
<tfoot id="trDataRow52">
<tr>
<td align="right" colspan="5">总计:</td>
<td>
<input name="txtTotal" type="text" value="0" id="txtTotal" style="width:80px;" class="inputText"/></td>
<td> </td>
</tr>
</tfoot>
<!--统计行结束-->
</table>
</td>
</tr>
<tr >
<td >
<input type="button" name="btnAdd" value="增加明细" accesskey="a" id="btnAdd" class="buttonwhite_60_23" />
<input type="button" value="提交" class="buttonwhite_60_23" onclick="sendForm();"/>
</tr>
</table>
</form>
</center>
<script type="text/javascript" >
$(function()
{
var v=$("#tbin");//得到表格的jquery对象
vtxtDate=v.find("#txtDate");
vtxtDate.val(getDate());
vtxtDate.attr("readonly","true");
vtxtMoney=v.find("#txtMoney");
vtxtMoney.attr("readonly","true");
vNumber=v.find("#txtNumber");
var domvNumber=vNumber[0];//jquery对象转换为dom对象
domvNumber.focus();
$("#btnAdd").bind("click",AddRow);//给添加按钮注册js脚本,添加一行
$("#txtNumber").bind("keydown",MyKeyDown); //按下键盘事件
$("#txtCount").bind("keydown",MyKeyDown);
$("#txtWeight").bind("keydown",MyKeyDown);
$("#txtMoneyWeight").bind("keydown",MyKeyDown); //按下键盘事件
$("#txtRate").bind("keydown",MyKeyDown);
$("#txtMoney").bind("keydown",MyKeyDown);
$("#selReceiver").bind("keydown",MyKeyDown);
$("#txtSpecial_Remark").bind("keydown",MyKeyDown);
//每行的删除操作注册脚本事件
$("#btnDel").bind("click", function()
{
if (confirm('确认要删除么?')==true)
{
var vcount=$("#tbin tr").filter(".MyRow").size()+1;//表格有多少个数据行;
if(vcount<=2)
{
alert('请至少保留一行');
return;
}
var vbtnDel=$(this);//得到点击的按钮对象
var vTr=vbtnDel.parent("td").parent("tr");//得到父tr对象;
if(vTr.attr("id")=="trDataRow1")
{
alert('第一行不能删除!'); //第一行是克隆的基础，不能删除
return;
}
else
{
vTr.remove();
}
UpdateTotal();
}
}); //给删除按钮注册js脚本
$("#txtID").bind("change", function()
{
var vtxtID=$(this);//得到变化的文本框对象
var vVal=vtxtID.val();
if(vVal=="")
{
alert('序号不能为空');
vtxtID.focus();
vtxtID.val(1);
return false;
}
var vBool=IsInt(vVal,"+");
if(vBool==false )
{
alert('序号必须为正整数');
vtxtID.focus();
vtxtID.val(1);
return false;
}
}
)
//计费重量变化时计算费用
$("#txtMoneyWeight").bind("change", function()
{
var vTotalMoney=0;//总金额的初始值为0;
var vtxtDetail=$(this);//得到变化的文本框对象
var vVal=vtxtDetail.val();
if(vVal=="")
{
alert('收汇金额不能为空');
vtxtDetail.focus();
vtxtDetail.val(0);
return false;
}
var vBool=IsInt(vVal,"+","0");//数据类型判断
var vtxtAfter=vtxtDetail.parent("td").parent("tr").find("#txtRate");//得到费率;
var vtxtMoney=vtxtDetail.parent("td").parent("tr").find("#txtMoney");//得到费用;
var vMoney=CalculatorMoney(vVal,vtxtAfter.val());
vtxtMoney.val(vMoney);
UpdateTotal();
}); //变化脚本结束
//费率变化时计算费用
$("#txtRate").bind("change", function()
{
var vTotalMoney=0;//总金额的初始值为0;
var vtxtDetail=$(this);//得到变化的文本框对象
var vVal=vtxtDetail.val();
if(vVal=="")
{
alert('费率不能为空');
vtxtDetail.focus();
vtxtDetail.val(0);
return false;
}
var vBool=IsFloat(vVal,"+","0");//数据类型判断
if(vBool==false )
{
alert('费率必须为数字');
vtxtDetail.focus();
vtxtDetail.val(0);
return false;
}
var vtxtAfter=vtxtDetail.parent("td").parent("tr").find("#txtMoneyWeight");//得到计费重量;
var vtxtMoney=vtxtDetail.parent("td").parent("tr").find("#txtMoney");//得到费用;
var vMoney=CalculatorMoney(vtxtAfter.val(),vVal);
vtxtMoney.val(vMoney);
UpdateTotal();
}); //变化脚本结束
})//所有事件脚本结束
</script>
</body>
</html>
