樓主

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
|