首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

求一段處理Table的JavaScript代碼。该怎么处理

2012-01-30 
求一段處理Table的JavaScript代碼。在WEB面頁，我自動產生了一個Table,結構如下：tableid tbDetail borde

求一段處理Table的JavaScript代碼。
在WEB面頁，我自動產生了一個Table,結構如下：
<table   id= "tbDetail "   border= "0 ">
<tr   style= "BACKGROUND-COLOR:aqua ">
<td> Description </td>
<td> Unit   Price </td>
<td> Michael   Nien </td>
<td> Shawn   Shih </td>
<td> Scott   Kao </td>
<td> Pei-Yee   Lee </td>
<td> Sanford   Tang </td>
<td> Binh   Nugyen </td>
<td> Total   Qty </td>
</tr>
<tr   style= "BORDER-LEFT-COLOR:burlywood;BORDER-BOTTOM-COLOR:burlywood;BORDER-TOP-COLOR:burlywood;BACKGROUND-COLOR:azure;BORDER-RIGHT-COLOR:burlywood ">
<td> <span> Pen </span> </td>
<td> <span> 0.500 </span> </td>
<td> <input   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl3 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl4 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl5 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl6 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl7 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <span> 0 </span> </td>
</tr>
<tr   style= "BORDER-LEFT-COLOR:burlywood;BORDER-BOTTOM-COLOR:burlywood;BORDER-TOP-COLOR:burlywood;BACKGROUND-COLOR:azure;BORDER-RIGHT-COLOR:burlywood ">
<td> <span> Pencil </span> </td>
<td> <span> 0.250 </span> </td>
<td> <input   name= "_ctl11 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl12 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl13 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl14 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl15 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl16 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <span> 0 </span> </td>
</tr>
<tr   style= "BORDER-LEFT-COLOR:burlywood;BORDER-BOTTOM-COLOR:burlywood;BORDER-TOP-COLOR:burlywood;BACKGROUND-COLOR:azure;BORDER-RIGHT-COLOR:burlywood ">
<td> <span> CD </span> </td>
<td> <span> 1.000 </span> </td>
<td> <input   name= "_ctl20 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>


<td> <input   name= "_ctl21 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl22 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl23 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl24 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <input   name= "_ctl25 "   type= "text "   value= "0 "   style= "WIDTH:50px "> </td>
<td> <span> 0 </span> </td>
</tr>
<tr   style= "BACKGROUND-COLOR:aquamarine ">
<td> Total   Amount </td>
<td> </td>
<td> 0 </td>
<td> 0 </td>
<td> 0 </td>
<td> 0 </td>
<td> 0 </td>
<td> 0 </td>
<td> 0 </td>
</tr>
</table>
現求一段JavaScript代碼，當我在移開TextBox時，計算後來的TotalQty和下面的Total   Amount.謝謝！

[解决办法]
＜asp:TemplateColumn HeaderText= "数量 "＞
＜ItemTemplate＞
＜asp:TextBox id= "ShuLiang " runat=’server’ Text=’＜%# DataBinder.Eval(Container.DataItem, "DG_ShuLiang ")%＞’
onkeyup= "javascript:DoCal() "
/＞

＜asp:RegularExpressionValidator id= "revS " runat= "server " ControlToValidate= "ShuLiang " ErrorMessage= "must be integer " ValidationExpression= "^\d+$ " /＞
＜/ItemTemplate＞
＜/asp:TemplateColumn＞

＜asp:TemplateColumn HeaderText= "单价 "＞
＜ItemTemplate＞
＜asp:TextBox id= "DanJian " runat=’server’ Text=’＜%# DataBinder.Eval(Container.DataItem, "DG_DanJian ")%＞’
onkeyup= "javascript:DoCal() "
/＞

＜asp:RegularExpressionValidator id= "revS2 " runat= "server " ControlToValidate= "DanJian " ErrorMessage= "must be numeric " ValidationExpression= "^\d+(\.\d*)?$ " /＞

＜/ItemTemplate＞
＜/asp:TemplateColumn＞

＜asp:TemplateColumn HeaderText= "金额 "＞
＜ItemTemplate＞
＜asp:TextBox id= "JinE " runat=’server’ Text=’＜%# DataBinder.Eval(Container.DataItem, "DG_JinE ")%＞’ /＞
＜/ItemTemplate＞
＜/asp:TemplateColumn＞＜script language= "javascript "＞
function DoCal()
{
　var e = event.srcElement;//对象事件源
　var row = e.parentNode.parentNode;
　var txts = row.all.tags( "INPUT ");
　if (!txts.length || txts.length ＜ 3)
　　return;

　var q = txts[txts.length-3].value;
　var p = txts[txts.length-2].value;

　if (isNaN(q) || isNaN(p))
　　return;

　q = parseInt(q);
　p = parseFloat(p);

　txts[txts.length-1].value = (q * p).toFixed(2);
}
＜/script＞
[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<title> </title>
<meta name= "GENERATOR " content= "Microsoft Visual Studio .NET 7.1 ">
<meta name= "ProgId " content= "VisualStudio.HTML ">


<meta name= "Originator " content= "Microsoft Visual Studio .NET 7.1 ">
<meta name= "vs_targetSchema " content= "http://schemas.microsoft.com/intellisense/ie5 ">
<script language= "javascript ">
<!--
function txtKeyPressHandler(){
var obj = event.srcElement;
var objTr = obj.parentElement.parentElement;

var unitPrice = objTr.cells[1].firstChild.innerHTML;
var iUnitPrice = parseFloat(unitPrice);

var totalQty = 0;
for(var i=2; i <objTr.cells.length - 1; i++){
var iAmount = parseInt(objTr.cells[i].firstChild.value, 10);
totalQty += iUnitPrice * iAmount;
}
objTr.lastChild.firstChild.innerHTML = totalQty.toString();

//Calc Total Amount
var objTable = objTr.parentElement;

for(var j=2; j <objTr.cells.length; j++){
var totalAmount = 0;
for(var k=1; k <objTable.rows.length - 1; k++){

if(j == objTr.cells.length - 1)
{//Total Qty sum
var iAmount = parseFloat(objTable.rows[k].cells[j].firstChild.innerHTML);

totalAmount += iAmount;
}
else
{
var iPerUnitPrice = parseFloat(objTable.rows[k].cells[1].firstChild.innerHTML);
var iAmount = parseInt(objTable.rows[k].cells[j].firstChild.value, 10);
totalAmount += iPerUnitPrice*iAmount;
}
}
objTable.lastChild.cells[j].innerHTML = totalAmount.toString();
}
}

function bindEvent(){
var txts = document.getElementsByTagName( 'input ');
for(var i=0; i <txts.length; i++){
txts[i].onchange = txtKeyPressHandler;
}
}
window.onload = bindEvent;
//-->
</script>
</head>
<body>
<table id= "tbDetail " border= "0 ">
<tr style= "BACKGROUND-COLOR:aqua ">
<td> Description </td>
<td> Unit Price </td>
<td> Michael Nien </td>
<td> Shawn Shih </td>
<td> Scott Kao </td>
<td> Pei-Yee Lee </td>
<td> Sanford Tang </td>
<td> Binh Nugyen </td>
<td> Total Qty </td>
</tr>
<tr style= "BORDER-LEFT-COLOR:burlywood;BORDER-BOTTOM-COLOR:burlywood;BORDER-TOP-COLOR:burlywood;BACKGROUND-COLOR:azure;BORDER-RIGHT-COLOR:burlywood ">
<td> <span> Pen </span> </td>
<td> <span> 0.500 </span> </td>
<td> <input type= "text " value= "0 " style= "WIDTH:50px " id= "Text1 " name= "Text1 "> </td>
<td> <input name= "_ctl3 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text2 "> </td>
<td> <input name= "_ctl4 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text3 "> </td>
<td> <input name= "_ctl5 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text4 "> </td>
<td> <input name= "_ctl6 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text5 "> </td>
<td> <input name= "_ctl7 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text6 "> </td>
<td> <span> 0 </span> </td>
</tr>


<tr style= "BORDER-LEFT-COLOR:burlywood;BORDER-BOTTOM-COLOR:burlywood;BORDER-TOP-COLOR:burlywood;BACKGROUND-COLOR:azure;BORDER-RIGHT-COLOR:burlywood ">
<td style= "HEIGHT: 25px "> <span> Pencil </span> </td>
<td style= "HEIGHT: 25px "> <span> 0.250 </span> </td>
<td style= "HEIGHT: 25px "> <input name= "_ctl11 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text7 "> </td>
<td style= "HEIGHT: 25px "> <input name= "_ctl12 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text8 "> </td>
<td style= "HEIGHT: 25px "> <input name= "_ctl13 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text9 "> </td>
<td style= "HEIGHT: 25px "> <input name= "_ctl14 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text10 "> </td>
<td style= "HEIGHT: 25px "> <input name= "_ctl15 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text11 "> </td>
<td style= "HEIGHT: 25px "> <input name= "_ctl16 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text12 "> </td>
<td style= "HEIGHT: 25px "> <span> 0 </span> </td>
</tr>
<tr style= "BORDER-LEFT-COLOR:burlywood;BORDER-BOTTOM-COLOR:burlywood;BORDER-TOP-COLOR:burlywood;BACKGROUND-COLOR:azure;BORDER-RIGHT-COLOR:burlywood ">
<td> <span> CD </span> </td>
<td> <span> 1.000 </span> </td>
<td> <input name= "_ctl20 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text13 "> </td>
<td> <input name= "_ctl21 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text14 "> </td>
<td> <input name= "_ctl22 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text15 "> </td>
<td> <input name= "_ctl23 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text16 "> </td>
<td> <input name= "_ctl24 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text17 "> </td>
<td> <input name= "_ctl25 " type= "text " value= "0 " style= "WIDTH:50px " id= "Text18 "> </td>
<td> <span> 0 </span> </td>
</tr>
<tr style= "BACKGROUND-COLOR:aquamarine ">
<td> Total Amount </td>
<td> </td>
<td> 0 </td>
<td> 0 </td>
<td> 0 </td>
<td> 0 </td>
<td> 0 </td>
<td> 0 </td>
<td> 0 </td>
</tr>
</table>
</body>
</html>

读书人精选
热点排行