?? ch18-256.html
字號:
<HTML>
<HEAD>
<TITLE>技巧篇--動態生成表格</TITLE>
</HEAD>
<BODY bgcolor="#fef4d2" >
<br><br>
<center>
<h2>技巧篇--動態生成表格</h2>
<hr width=300>
<!-- 案例代碼1開始 -->
<script language=JavaScript>
function ProduceTable(){
var x=1;
var y=1;
var tot="";
var r_temp="";
var d_cell="";
var bgc=document.mytable.bgcolor.options[document.mytable.bgcolor.selectedIndex].value;
var bor=document.mytable.border.options[document.mytable.border.selectedIndex].value;
var cellalign=document.mytable.cellalign.options[document.mytable.cellalign.selectedIndex].value;
var cellvalign=document.mytable.cellvalign.options[document.mytable.cellvalign.selectedIndex].value;
var num_of_cols=document.mytable.cols.value
var num_of_rows=document.mytable.rows.value
<!-- [Step1]: 這里可以更改彈出警告框中的信息 -->
if (document.mytable.rows.value<=0){ window.alert("行數應該 >= 1")
return }
if (document.mytable.cols.value<=0){ window.alert("列數應該 >= 1")
return }
while (num_of_rows>0) {
while(num_of_cols>0){
<!-- [Step2]: 在此能夠修改彈出確認窗口中的信息 -->
var cell_text=confirm("您確定要繼續生成動態表格么？")
if(cell_text) {
<!-- [Step3]: 這里可以設置JavaScript提示窗口中的信息 -->
d_cell=prompt("請輸入第 "+x+" 行，第 "+y+" 列中的信息：")
if(!d_cell) return;
r_temp=r_temp+"<td align="+cellalign+" valign="+cellvalign+">"+d_cell+"</td>"
num_of_cols=num_of_cols-1;
y=y+1; }
else window.alert("難道您想放棄么？？") }
tot=tot+"<tr>"+r_temp+"</tr>"
r_temp="";
num_of_cols=document.mytable.cols.value
var y=1;
num_of_rows=num_of_rows-1;
x=x+1; }
var stl="<style type='text/css'>"+"#dyn {position:relative;"+"left:"+150+";top:"+150+"}"+"</style>"
var html="<html><head><title></title></head>"+stl+"<body>"+"<table border="+bor+" id=dyn "+" bgcolor="+ bgc+"'>"+tot+"</table></body></html>"
<!-- [Step4]: 在此能夠更改顯示生成表格的頁面網址 -->
window.open('../CH18/Ch18-258.html').document.write(html)
}
</script>
<!-- 案例代碼1結束 -->
<!-- 案例代碼2開始 -->
<form name="mytable">
<!-- [Step5]: 在此能夠更改頁面表格的邊界框和背景色 -->
<table border="1" bgcolor="#66CC99" cellpadding="0" cellspacing="0">
<!-- [Step6]: 這里可以修改表格中的信息 -->
<tr><td align="middle" > 表 格 屬 性</td></tr>
<!-- [Step7]: 在此能夠設置文本框的列長度和默認值 -->
<tr><td align="left">表格行數：<input type="text" name="rows" size="3" value=" 2"></td></tr>
<tr><td align="left">表格列數：<input type="text" name="cols" size="3" value=" 2"></td></tr>
<tr><td align="left">表格背景色：
<select name="bgcolor">
<!-- [Step8]: 這里可以更改下拉菜單中的顏色名稱和代碼 -->
<option value="#990000">紅色</option>
<option value="#FFFF99" selected>黃色</option>
<option value="#FF0000">桔色</option>
<option value="#CC9900">灰色</option>
<option value="#000066">藍色</option>
<option value="#006600">綠色</option>
</select>
</td></tr>
<tr><td align="left">表格邊界框：
<select name="border">
<option value="0"> 0 </option>
<option value="1" selected> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
</select>
</td></tr>
<tr><td align="left">水平對齊：
<select name="cellalign">
<option value="left">左邊</option>
<option value="center" selected>中間</option>
<option value="right">右邊</option>
</select>
</td></tr>
<tr><td align="left">垂直對齊：
<select name="cellvalign">
<option value="top">上邊</option>
<option value="middle" selected>中間</option>
<option value="bottom">下邊</option>
</select>
</td></tr>
<!-- [Step9]: 在此能夠更改按鈕的名稱 -->
<tr><td align="center"><input type="button" value="生 成" onclick="ProduceTable()">
</td></tr>
</table></form>
<!-- 案例代碼2結束 -->
</BODY>
</HTML>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -