?? mvtable.html
字號:
<html>
<script language="javascript" type="text/javascript" src="dynatable.js"></script>
<link rel="stylesheet" type="text/css" href="dynatable.css">
<script language="javascript" type="text/javascript">
var docDivName = "peopletable"; //...............................................................................用來顯示表格的Div的名稱！（也可以是span）
var headerCells = ["名稱","部門","年齡","性別","身份證號碼","電話"]; //..........................................要顯示的列名！
var dataFields = ["example_Name","example_Dep","example_Age","example_Sex","example_Card","example_Tel"]; //.....對應頁面的控件名稱！
var inputTypes = ["text","select_only","number","select","text","textarea"]; //..................................類型有四種：文本框（text）、多行文本（textarea）、數(shù)字（number）、下拉菜單（select）、不可重復的下拉菜單（select_only）、一直隱藏（hide）
var ColWidths = ["20%","25%","15%","15%","10%","15%"]; //........................................................各列的列寬，可以用“百分比”，也可以用“像素”！
var readOnlyHide = [false,false,false,false,true,false]; //......................................................只讀時隱藏！
var ColEnabled = [false,true,true,true,true,true]; //............................................................各列的值是否可以修改！
glbOptions["example_Dep"] = ["電腦中心","總裁辦","后勤處","人力資源處"]; //......................................要顯示的某列下拉菜單的值！
glbOptions["example_Sex"] = ["男","女",""];
BlankCellEnabled = false; //.....................................................................................空的單元格始終可以編輯！
ReadOnly = false; //.............................................................................................表格是否為只讀！
allowSelect = true; //...........................................................................................表格內(nèi)容是否允許選擇！
splitString = "/*/";
</script>
<body onload="initialize();createTable(headerCells, dataFields, inputTypes, div.id);">
<hr />數(shù)據(jù)源 (數(shù)據(jù)保存的地方，當然變量“tabls”也保存有！例：var Str = tabls[表格編號][行][列];)<br>
<textarea id="example_Name">小張┋小明┋小花</textarea>
<textarea id="example_Dep">┋┋</textarea>
<textarea id="example_Age">19┋18┋21</textarea>
<textarea id="example_Sex">男┋男┋女</textarea>
<textarea id="example_Card">123456┋654321┋987654</textarea>
<textarea id="example_Tel">1234578┋11111111┋54354353</textarea>
<br>
<input type="button" value="生成（刷新）表格" onclick="initialize();createTable(headerCells, dataFields, inputTypes, div.id)">
<input type="button" value="設置為只讀" onclick="ReadOnly = true;initialize();createTable(headerCells, dataFields, inputTypes, div.id)">
<input type="button" value="取消只讀" onclick="ReadOnly = false;initialize();createTable(headerCells, dataFields, inputTypes, div.id)">
<hr />添加一行的例子：<br>
<table id="sampletbl">
<tr>
<td>名稱</td>
<td>部門</td>
<td>年齡</td>
<td>性別</td>
<td>身份證號碼</td>
<td>電話</td>
</tr>
<tr>
<td><input name="tmpITSB_Name"></td>
<td><input name="tmpITSB_Model"></td>
<td><input name="tmpITSB_Count"></td>
<td><input name="tmpITSB_UnitPrice"></td>
<td><input name="tmpITSB_User"></td>
<td><input name="tmpITSB_Phone"></td>
</tr>
</table>
<input type="button" value="按上面數(shù)據(jù)添加一行" onclick="var frm=document.all;appendRecord([frm.tmpITSB_Name.value,frm.tmpITSB_Model.value,frm.tmpITSB_Count.value,frm.tmpITSB_UnitPrice.value,frm.tmpITSB_User.value,frm.tmpITSB_Phone.value],div.id)">
<input type="button" value="添加一行，空數(shù)據(jù)！" onclick="appendRecord(['','','','','',''],div.id)">
<hr>刪除例子：<br>
<input type="button" value="刪除第0行" onclick="removeRecord(0,div.id)">
<input type="button" value="刪除第1行" onclick="removeRecord(1,div.id)">
<input type="button" value="刪除第2行" onclick="removeRecord(2,div.id)">
<input type="button" value="刪除最后1行" onclick="removeRecord('last',div.id)">
<input type="button" value="刪除所有行" onclick="removeRecord('all',div.id)">
<hr>表格（點擊列名可“按字符”排序）：<br><br>
<div id="peopletable">
這里是顯示表格的DIV
</div>
<hr>
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -