|
<html>
<head>
<!--
* title: table to edit online
* description: use to table to input data to a form
* copyright: copyright (c) 2003
* company: weide
* @author weidegong(weidegong@yahoo.com.cn)
* @version 3.2
* function 动态可编辑表格构成的表单，其中输入域及其输入形式可根据实际需要自行设置（参考本例select),ie6测试通过
将script和style定义放在页面head区；将如<table></table>区域拷贝至需要使用该表格的位置即可;最下方为参考按钮
为了能在同一form中使用多个表格，故将<table>放在form中，而不是将<tbody>放在form中，这样导致提交的输入域的第一个值无效，如在jsp中：string strxs[]=request.getparametervalues("x");//则strxs[0]即为无效数据
thead.tr.th:定义表头，可以设置相应的列宽；th的数目需要同下面的td数目相同，以一一对应；其中"x"是固定列
thead.tr.td.<input ... name=x>设置相应数据列对应的输入域的名字；其中第一列用于显示一个选择框
tabledata,默认<tr>的样式单名称；tabledatahit,高亮度显示时<tr>采用的样式单
inputtabledata,显示数据时表格中input输入域使用的样式单；inputtabledatahit,tr高亮度显示时，input使用的样式单
* @history 1.0 从网上下载了例子，并略作修改
2.0 使用css表单美化界面；增加一个模拟可编辑select下拉框
3.0 将addrow,deleterow修改为带有对象类型参数的函数，使得在同一界面可使用可编辑表格的多个实例
3.1 将addrow,deleterow函数的参数修改为表格对象，更加方便；整理出onlineedittable.css、onlineedittable.js
3.2 (2003-03-27)增加键盘导航功能,使用方向键或回车键均可
-->
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<link href="onlineedittable.css" type=text/css rel=stylesheet>
<script language="javascript" src="onlineedittable.js"></script>
</head>
<body>
<select id=qswh size=6 style="position:absolute;display:none" onblur="this.style.display='none'" onchange="setinputfromselect(inputfocus,this)">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">英国</option>
</select>
<form name=frmtableonlineedit action="showpara.htm">
<table bgcolor=silver border=2 bordercolordark=gray bordercolorlight=silver
cellpadding=2 cellspacing=1 cols=1 id=tableonlineedit rules=rows width="100%" onkeydown="navigatekeys()" onkeyup="setkeydown(false)">
<thead>
<tr bgcolor=#0a6846>
<th class=thdata width=1%><input type=checkbox id=checklineall onclick=setonlineeditcheckbox(getupperobj(this,"table"),this.checked)></th><!--fixed-->
<th class=thdata width=30%>标题一</th>
<th class=thdata width=30%>标题二</th>
<th class=thdata width=39%>标题三</th>
<!--<th....................标题n...可定义多个-->
</tr>
<tr style="display:none" bgcolor=#e0e0e0 class=tabledata onclick=lightonrow(this)>
<td class=schedulebuttonvisible ><input type=checkbox id=checkline></td><!--fixed-->
<td><input class=inputtabledata name=x onclick=showinputselect(this,qswh) onblur=hideinput(qswh)></td>
<td><input class=inputtabledata name=y></td>
<td><input class=inputtabledata name=z></td>
<!--<td><input...........name=...></td>....可定义多个，与上面的<th>数目保持一致...-->
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
<p align=center><font size="1">注：第一列单击弹出下拉框选择；在表格最后一行，按下“下箭头”可以增加一个新的空行;使用回车键可以向下遍历整个表格</p>
<p align=center><font size="2">*****=====下列按钮根据需要选定使用======*****</font></p>
<p align=center>
<input type=button onclick="addrow(tableonlineedit)" value="添加空数据行">
<input type=button onclick="addinstancerow(tableonlineedit,['x','y','z'],['1','100','这是一个测试的例子'])" value="添加实例数据行">
<input type=button onclick="deleterow(tableonlineedit)" value="删除">
<input type=button onclick="clearrow(tableonlineedit)" value="删除全部">
<input type=button onclick="frmtableonlineedit.submit()" value="submit form">
<input type=button onclick="frmtableonlineedit.reset()" value="reset">
</p>
============================另一个实例=================================
<form action="showpara.htm">
<table bgcolor=silver border=2 bordercolordark=gray bordercolorlight=silver
cellpadding=2 cellspacing=1 cols=1 id=tableresource rules=rows width="100%" onkeydown="navigatekeys()" onkeyup="setkeydown(false)">
<thead>
<tr bgcolor=#0a6846>
<th class=thdata width=1%><input type=checkbox id=checklineall onclick=setonlineeditcheckbox(getupperobj(this,"table"),this.checked)></th><!--fixed-->
<th class=thdata width=30%>标题一</th>
<th class=thdata width=30%>标题二</th>
<th class=thdata width=39%>标题三</th>
<!--<th....................标题n...可定义多个-->
</tr>
<tr style="display:none" bgcolor=#e0e0e0 class=tabledata onclick=lightonrow(this)>
<td class=schedulebuttonvisible ><input type=checkbox id=checkline></td><!--fixed-->
<td><input class=inputtabledata name=x onclick=showinputselect(this,qswh) onblur=hideinput(qswh)></td>
<td><input class=inputtabledata name=y></td>
<td><input class=inputtabledata name=z></td>
<!--<td><input...........name=...></td>....可定义多个，与上面的<th>数目保持一致...-->
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
本文关键：在线 可编辑 表格 动态
本站最佳浏览方式为 分辨率 1024x768 IE 6.0（或更高版本的 IE浏览器） 
|