📄 index.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<html>
<style type="text/css">
<!--
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 409px;
top: 155px;
}
-->
</style>
<head>
<script language="javascript" src="js/calendar.js" type="text/javascript"></script>
<script language="javascript" src="js/util.js" type="text/javascript"></script>
<script language="javascript" src="js/engine.js" type="text/javascript"></script>
<title>动态表设置</title>
<script type="text/javascript">
var oLeft = 0;
var oTop = 0;
var isRC = 0; ///0 为添加行, 1为添加列
function getParentXY(obj){
if(obj.offsetParent!=undefined){
oLeft += obj.offsetParent.offsetLeft;
oTop +=obj.offsetParent.offsetTop;
getParentXY(obj.offsetParent);
}else{
return;
}
}
function addRow(tableid,rnum){
var table = $(tableid);
///var rnum = table.rows.length;
var cnum = table.rows[0].cells.length;
var row = table.insertRow(rnum);
for(var i=0;i<cnum;i++){
var cell = row.insertCell(i);
cell.innerHTML = " ";
}
}
function addfile(tableid){
var typeVal = DWRUtil.getValue("selType");
var row = DWRUtil.getValue("selfR");
var cell = DWRUtil.getValue("selfC");
var cel = document.getElementById(tableid).rows[row].cells[cell];
var celId = row*10+cell;
var oPer = "<a herf=\"#\" onclick=\"delInner('"+tableid+"','"+celId+"')\">删除</a>|<a herf=\"#\" onclick=\"updateInner('"+tableid+"','"+celId+"')\">修改</a>"
if(typeVal=='1'){
cel.innerHTML = "名称: "+$("txtType").value+" 表现为: "+"<input type='text' id='"+celId+"' size='15'>"+oPer;
}else if(typeVal=='2'){
var codeList = DWRUtil.getValue("selCodeList");
var str = "<select id='"+celId+"'>";
str += "<option value='1'>码表"+codeList+"的第1个值</option>";
str += "<option value='1'>码表"+codeList+"的第2个值</option>";
str += "</select>";
cel.innerHTML = "名称: "+$("txtType").value+" 表现为: "+str+oPer;
}
DWRUtil.setValue("txtType","");
DWRUtil.setValue("selfR","1");
DWRUtil.setValue("selfC","1");
DWRUtil.setValue("selType","1");
$("spanCodeList").innerHTML="";
$("divfield").style.visibility = "hidden";
}
function delInner(tbid,cid){
var rnum = $(cid).parentElement.parentElement.rowIndex;
var cnum = $(cid).parentElement.cellIndex;
if(confirm('确定删除吗?')){
$(tbid).rows[rnum].cells[cnum].innerHTML = " ";
}else{
return;
}
}
function updateInner(tbid,cid){
var rnum = $(cid).parentElement.parentElement.rowIndex;
var cnum = $(cid).parentElement.cellIndex;
$("divfield").style.visibility = "visible";
getParentXY($(cid));
$("divfield").style.left = oLeft + $(cid).offsetLeft;
$("divfield").style.top = oTop + $(cid).offsetTop+$(cid).offsetHeight;
oLeft =0;
oTop = 0;
DWRUtil.removeAllOptions("selfR");
DWRUtil.addOptions("selfR",[rnum]);
DWRUtil.removeAllOptions("selfC");
DWRUtil.addOptions("selfC",[cnum]);
}
function addCell(tbid,cnum){
var table = $(tbid);
var rnum = table.rows.length;
///var cnum = table.rows[0].cells.length;
var icl = table.rows[0].insertCell(cnum);
icl.innerHTML = "列";
for(var i=1;i<rnum;i++){
var icell = table.rows[i].insertCell(cnum);
icell.innerHTML = " ";
}
}
function chooseRC(divid,btnId,tbid,selid,rc){
$(divid).style.visibility = "visible";
$("divfield").style.visibility = "hidden";
getParentXY($(btnId));
$(divid).style.left = oLeft + $(btnId).offsetLeft;
$(divid).style.top = oTop + $(btnId).offsetTop+$(btnId).offsetHeight;
oLeft =0;
oTop = 0;
insertSel(tbid,selid,rc);
}
function initfield(divid,btnid,tbid){
$(divid).style.visibility = "visible";
$("divRow").style.visibility = "hidden";
getParentXY($(btnid));
$(divid).style.left = oLeft + $(btnid).offsetLeft;
$(divid).style.top = oTop + $(btnid).offsetTop+$(btnid).offsetHeight;
oLeft =0;
oTop = 0;
var rArr = new Array();
var cArr = new Array();
for(var i=0;i<=$(tbid).rows.length;i++){
rArr[i] = i;
}
for(var i=0;i+2<=$(tbid).rows[0].cells.length;i++){
cArr[i] = i+2;
}
DWRUtil.removeAllOptions("selfR");
DWRUtil.addOptions("selfR",rArr);
DWRUtil.removeAllOptions("selfC");
DWRUtil.addOptions("selfC",cArr);
}
function insertSel(tbid,selid,rc){
var opArr = new Array();
var table = $(tbid);
var rNum = table.rows.length;
var cNum = table.rows[0].cells.length;
if(rc=='r'){
for(var i=0;i<=rNum;i++){
opArr[i] = i;
}
$("spanrc").innerText = "行";
isRC = 0;
}else if(rc=='c'){
for(var i=0;i<=cNum;i++){
opArr[i] = i;
}
$("spanrc").innerText = "列";
isRC = 1;
}else{
return;
}
DWRUtil.removeAllOptions(selid);
DWRUtil.addOptions(selid,opArr);
}
function addrc(tabid,selid,divid){
var rcNum = DWRUtil.getValue(selid);
if(isRC==0){
addRow(tabid,rcNum);
$(divid).style.visibility = "hidden";
}else if(isRC==1){
addCell(tabid,rcNum);
$(divid).style.visibility = "hidden";
}else{
$(divid).style.visibility = "hidden";
return;
}
}
function typeChang(val){
if(val=="2"){
var str = "<select id='selCodeList'>";
str += "<option value='1'>码表1</option>";
str += "<option value='2'>码表2</option>";
str += "</select>";
$("spanCodeList").innerHTML = str;
}else if(val=='1'){
$("spanCodeList").innerHTML = "";
}else{
return;
}
}
</script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 424px;
top: 154px;
}
#divRow{
position:absolute;
width:300px;
height:39px;
z-index:11;
}
#divCel{
position:absolute;
width:300px;
height:39px;
z-index:12;
}
#divfield{
position:absolute;
width:350px;
height:150px;
z-index:13;
background-color: #cdcdcd;
}
-->
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table width="80%" border="0" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"><table width="100%" border="1" align="center" id="tb1">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><div align="center"> </div></td>
<td><div align="center"> </div></td>
<td><div align="center"> </div></td>
</tr>
<tr>
<td><div align="center"> </div></td>
<td><div align="center"> </div></td>
<td><div align="center"> </div></td>
</tr>
<tr>
<td><div align="center"> </div></td>
<td><div align="center"> </div></td>
<td><div align="center"> </div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td> </td>
<td><table width="100%" border="0">
<tr>
<td></td>
</tr>
</table></td>
<td> </td>
</tr>
</table>
<div align="center">
<input type="button" name="Submit2" value="添加行" onclick="chooseRC('divRow',this.id,'tb1','selRow','r')" id="btnAddRow" />
<input type="button" name="Submit4" value="添加列" onclick="chooseRC('divRow',this.id,'tb1','selRow','c')" id="addcelBtn" />
<input type="button" name="Submit" value="增加字段" onclick="initfield('divfield','btnA','tb1')" id="btnA"/>
</div>
<div id="divRow" style="visibility:hidden">
<div id="insertRow">在第
<select name="selRow" id="selRow">
</select><span id="spanrc"></span>之后添加
<input type="button" name="Submit5" value="确定" onclick="addrc('tb1','selRow','divRow')" />
</div>
</div>
<div id="divfield" style="visibility:hidden">
<table width="325" border="1">
<tr>
<td>字段名称:</td>
<td><input name="txtType" type="text" size="12" id="txtType" /></td>
</tr>
<tr>
<td>字段类型:</td>
<td><select name="selType" onchange="typeChang(this.value)" id="selType">
<option value="1" selected="selected">文本</option>
<option value="2">码表</option>
</select><span id="spanCodeList"></span></td>
</tr>
<tr>
<td>增加到:</td>
<td><select name="selfR">
</select>
行
<select name="selfC">
</select>
列</td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="button" name="Submit6" value="确定" onclick="addfile('tb1')" />
</div></td>
</tr>
</table>
</div>
</form>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -