樓主
Lak
 發送站內信
|
以下是我結合這幾天小鋪上幾位網友的問題，自己寫的範例整理而成，
也感謝 TopCat(最高的貓) 大大提供新的靈感，才有後來的進階功能的部份。
<html>
<body>
<form >
<!--
以下主 Table(FrameA) 主要包含三個部份..
a. Title
b. 資料區
c. 總記區
NOTE：
在資料區的格式會與 Script 的操作相關，
若欲更動，請研究 Script 後，再做改變。
-->
<table id="FrameA" border="1" width="100%" >
<tr >
<td colspan="2">放 TITLE 的地方</td>
</tr>
<tr >
<td colspan="2">
<!-- 以下為資料區 -->
<table id="DataA" border="1" width="100%">
<tr width="200">
<td width="1%"><span>流水號 -- </span>品名</td>
<td width="1%">規格</td>
<td width="1%">數量</td>
<td width="1%">單價</td>
<td width="1%">金額</td>
<td width="1%">地點</td>
<td width="1%">刪除</td>
</tr>
</table>
<!-- 資料區結束 -->
</td></tr>
<tr >
<td>總計新台幣：元整</td>
<td>NT$</td>
</tr>
</table>
<br>
<table id="Opt" border='1'>
<tr>
<td colspan='3'>進階功能 </td>
</tr>
<tr>
<td> 選擇品項流水號 <Select name="prd_list" id="Prd_List">
<option>-----</option></Select>
</td>
<td><input type="button" value="刪除指定品項" onclick="DelTrEx()"></td>
<td><input type="button" value="產生新列於指定品項之上" onclick="AddTrEx()"></td>
</tr>
</table>
</form>
</body>
</html>
<Script Language="JavaScript">
function CreateRow()
{
var dis = document.all.DataA ;
var tb = document.all.FrameA ;
if ( typeof(arguments[0])!="undefined" )
var nRow = dis.insertRow(arguments[0]) ;
else var nRow = dis.insertRow(dis.rows.length) ;
for (i=0; i<dis.rows(0).cells.length; i++)
{
nCell = nRow.insertCell() ;
switch (i)
{
case 0 :
nCell.innerHTML = "<input type='text' readonly style='display:inline' size='5'>" +
"<input type='text' onchange='AddTr()'>" ;
break ;
case 2 :
case 3 :
nCell.innerHTML = "<input type='text' onchange='Comp()' size='12'>" ;
break ;
case 4 :
nCell.innerHTML = "<input type='text' size='15' readonly>" ;
break ;
case 6 :
nCell.innerHTML = "<input type='button' value='刪除本品項' onclick='DelTr()'>" ;
break ;
case 1 :
case 5 :
default :
nCell.innerHTML = "<input type='text'>" ;
}
}
SetIDX() ;
}
function AddTrEx()
{
var tar = document.all.Prd_List ;
var Idx = tar.options(tar.selectedIndex).text ;
CreateRow(Idx) ;
}
function AddTr()
{
var dis = document.all.DataA ;
if ( dis.rows(dis.rows.length-1).children(0).children(1).value != "" )
CreateRow() ;
}
function DelTrEx()
{
var tar = document.all.Prd_List ;
var Idx = tar.options(tar.selectedIndex).text ;
var dis = document.all.DataA ;
DelTr(dis.rows(parseInt(Idx))) ;
}
function DelTr()
{
if ( typeof(arguments[0])=="undefined" ) dis = window.event.srcElement.parentNode.parentNode ;
else dis = arguments[0] ;
dis.removeNode(true);
CompSum() ;
// 刪除最後一列則自動產生新列
if ( document.all.DataA.rows.length < 2 ) CreateRow() ;
SetIDX() ;
}
function SetIDX()
{
var dis = document.all.DataA ;
document.all.Prd_List.innerHTML = "" ;
for (i=1; i<dis.rows.length; i++)
{
oOpt = document.createElement("Option");
oOpt.text = i ;
document.all.Prd_List.add(oOpt) ;
dis.rows(i).cells(0).children(0).value = i ;
}
}
function Comp()
{
// 取得發生變動物件
var sur = window.event.srcElement ;
// 取得發生變動物件所在該欄位所屬之列 ( tr )
var dis = sur.parentNode.parentNode ;
var text = new RegExp(/[^0-9]+/) ;
// 判斷是否輸入數字
if ( text.test(sur.value) )
{
sur.value = "" ;
return alert("請輸入數字") ;
}
// 將數量乘上單價
sum = dis.cells(2).children(0).value * dis.cells(3).children(0).value ;
//alert( sum ) ;
// 將總合放於"金額"欄位
dis.cells(4).children(0).value = sum ;
CompSum() ;
}
function CompSum()
{
// 取得資料區 table 物件
var tb = document.all.DataA ;
// 取得主 table 物件
var Ftb = document.all.FrameA ;
sum = 0 ;
for (i=1 ; i<tb.rows.length; i++)
{
sum += tb.rows(i).cells(4).children(0).value * 1;
}
Ftb.rows(Ftb.rows.length-1).cells(0).innerHTML = "總計新台幣：" + sum + "元整" ;
Ftb.rows(Ftb.rows.length-1).cells(1).innerHTML = "NT$" + sum ;
}
CreateRow() ;
</Script>
另，題外話，不知有沒有人願意為這個系統做美工的呀.. =.=b
對 CSS 沒研究..不會弄美工..
如果對本程式有任何問題，可到小弟的留言版上反應，
有 BUG 也請反應，謝謝.. ^^
== 簽名檔 ==
By Lak
Web Site: Lak4CYUT.blogspot.com
|
1744
27
2116
739
