📄 mvtable.html

📁 JavaScript的经典代码
💻 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）、数字（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; //...........................................................................................表格内容是否允许选择！
	splitString = "/*/";
</script>

<body onload="initialize();createTable(headerCells, dataFields, inputTypes, div.id);">

	<hr />数据源 (数据保存的地方，当然变量“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="按上面数据添加一行" 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="添加一行，空数据！" 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 + -