台灣最大程式設計社群網站
線上人數
1504
 
會員總數:244807
討論主題:188841
歡迎您免費加入會員
討論區列表 >> 專欄文章 >> 動態生成教學範例--動態商用報價單 Bate V 2.0
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
動態生成教學範例--動態商用報價單 Bate V 2.0
價值 : 0 QP  點閱數:2327 回應數:1

樓主

Lak
初級專家
1744 27
2116 739
發送站內信

捐贈 VP 給 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 也請反應,謝謝.. ^^
搜尋相關Tags的文章: [ JavaScript ] , [ table ] , [ 動態生成 ] ,
本篇文章發表於2005-07-01 06:17
== 簽名檔 ==
By Lak
Web Site: Lak4CYUT.blogspot.com
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

TT001
檢舉此回應
問一個很笨的初學者問題,
請問此範例資料要怎麼輸入?
自行建立input textbox?還是SQL?
謝謝
本篇文章回覆於2019-01-15 13:41
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.