生成一个可以编辑的表格,并可以动态地添加行

于 2008-02-18 10:58:00 发布
阅读量2k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript function input date button null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuckoo1/article/details/2102397
本文介绍了一个使用HTML和JavaScript实现的动态表格系统，该系统允许用户添加和删除表格行，并支持日期和数值的有效性验证。此外，还实现了年龄与出生日期之间的自动计算转换功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
<head>
<script type="text/javascript">
function access()
{
 document.getElementById('Append').accessKey="a"
 document.getElementById('Confirm').accessKey="c"
 document.getElementById('DelAll').accessKey="d"
 document.getElementById('DelLst').accessKey="f"
}
</script>
</head>

Gu Laicheng, 2008.2.16<BR/>

生成一个可以编辑的表格,并可以动态地添加行,每次添加的行数可以控制,目前是MaxNumber=20.:<BR/>
可以和已有的明细纪录一起编辑.已有的明细纪录的序号为粗体字。<BR/>
注意:< div id=T4>< /div> 要放在FORM中.<BR/>
字符串有长度约束；数据型有合法性验证；日期型有合法性验证。<BR/>
输入年龄，自动计算出生日期；输入出生日期，自动计算年龄。<BR/>
回车符等同TAB制表符.<BR/>
有alt+快捷键功能，特别是，在按下alt+a时，焦点自动转到第一列的输入域中，以方便操作。<BR/>
提交后，可以获得表格中的数据，并生成insert语句 .

<style>
input
 {
 BORDER-LEFT: #FFFFFF 1px solid;
 BORDER-TOP:  #FFFFFF 1px solid;
 BORDER-RIGHT: #FFFFFF 1px solid;
 BORDER-BOTTOM: #FFFFFF 1px solid
 PADDING-RIGHT: 0px;
 PADDING-LEFT: 1px;
 FONT-SIZE:  1em;
 PADDING-BOTTOM: 2px;
 VERTICAL-ALIGN: middle;
 PADDING-TOP: 2px;
 }

.delbutton
 {
  font-family: Wingdings;
  cursor:   hand;
 }
</style>

<body onload="access()">

<FORM name=FormAdd method=post>

<div id=T4></div>

<INPUT class='bt' type='button' onclick='InsertRoomNoType(RoomNumberTypeDetail);' value='增加详细(a)' name='Append'>
<INPUT class='bt' type='button' onclick='Confirm0();' value='确认(c)' name='Confirm'>
<INPUT class='bt' type='button' onclick='DeleteAllTr(1);' value='删除全部(d)' name='DelAll'>
<INPUT class='bt' type='button' onclick='DelLowLine(0);' value='删除最后一行(f)' name='DelLst'>
</FORM>

<SCRIPT language=javascript>
//全局ja变量
var MaxNumber=20      //一次可以最多增加的房量详细信息
var AddHowRecord=0      //当前加了几个了

//删除指定表格下拉框所选中的行
function DeleteTr(o,f)
{
 var delrow = o.parentNode.parentNode.rowIndex;
 if (f && !confirm("您确信要删除此行["+delrow+"]明细信息吗?")) return;
 RoomNumberTypeDetail.deleteRow(delrow);
 AddHowRecord--;
 var ttl=RoomNumberTypeDetail.rows.length;
 for(var i=delrow; i<ttl; i++)
 {
  RoomNumberTypeDetail.rows[i].cells[0].innerText = i;
 }

}

//删除全部的行
function DeleteAllTr(f)
{
 if (f && !confirm("您确信要删除全部行明细信息吗?")) return;
 var ttl = RoomNumberTypeDetail.rows.length;
 for(var i=1; i<ttl; i++)
 {
  RoomNumberTypeDetail.deleteRow(1);    //由于是动态表格,这里是1,而不是i
  AddHowRecord--;
 }
}

//删除最后一行
function DelLowLine(f)
{
 if (f && !confirm("您确信要删除最后一行明细信息吗?")) return;
 var ttl = RoomNumberTypeDetail.rows.length;
 if (ttl==1) return;
 RoomNumberTypeDetail.deleteRow(ttl-1);
 AddHowRecord--;

}

//说明:通过js插入房量详细信息显示
//参数:要插入表格的ID值
function InsertRoomNoType(tab)
{
 if (AddHowRecord>=MaxNumber)
 {
  alert("每次最多只能增加"+MaxNumber+"条明细.如要增加更多,请先保存后再增加!");
  return false;
 }

 var i=RoomNumberTypeDetail.rows.length;
 var TrId="";
 AddHowRecord++;

 tr=tab.insertRow();
 TrId="TrId" + tab.rows.length;
 tr.id = TrId;
 tr.align="center";

 if (!(i&1)) tr.style.cssText="font-size:11pt;color:#333333;background-color:#E7DDE7";
 else  tr.style.cssText="font-size:11pt;color:#333333;background-color:#E7E7DD";

 tr.onmouseover=function()
 {
  this.style.backgroundColor ="#AAAAFF";
  grow = this.rowIndex+1; //TH
 }

 tr.onmouseout=function()
 {
  if (grow&1) this.style.backgroundColor="#E7DDE7";
  else   this.style.backgroundColor="#E7E7DD";
 }

 td = tr.insertCell(0);
 td.innerHTML=i;

 tr.insertCell(1).innerHTML="<input name=F001 maxlength=20    onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
 tr.insertCell(2).innerHTML="<input name=F002 maxlength=60 onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
 tr.insertCell(3).innerHTML="<input name=F003 maxlength=12 onblur='calDate(this)' ondblclick='getDateFromDialog(this);' size=12 onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
 tr.insertCell(4).innerHTML="<input name=F004 maxlength=3 onchange='calAge(this)' size=5 onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
 tr.insertCell(5).innerHTML="<input name=F005 onblur='checkDecimalInput(this)' onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
 tr.insertCell(6).innerHTML="<input name=F006 maxlength=20 onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
 tr.insertCell(7).innerHTML="<span class=delbutton onclick=DeleteTr(this,1)>&#34;</span>";

 FormAdd.F001[i-1].focus();  //增加后将第一列设为当前焦点激活状态，以方便输入数据。
}

function getDateFromDialog(obj) //利用弹出输入日期
{
 checkDateInput(obj);
 var a=showModalDialog("calendar.htm",obj.value.replace(/[-/.]/g,"//"),"status:no;resizable:no;help:no;dialogHeight:220px;dialogWidth:319px;DialogLeft:"+event.screenX+";DialogTop:"+event.screenY);
 if (a!=null) obj.value=a;
}


//日期+时长=>新的日期
function getfmtDate(d,i,u)
{
 var l;
 switch (u)
 {
 case "d":
  l = i*24*60*60*1000;
  break;
 case "m":
  l = i*24*60*60*1000*30;
  break;
 case "y":
  l = i*24*60*60*1000*365;
  break;
 default:
  l = 0;
  break;
 }
 var dt = new Date(new Date().getTime()+l);

 return dt.getFullYear()+"-"+("0"+(1+dt.getMonth())).slice(-2)+"-"+("0"+dt.getDate()).slice(-2); 
}

//日期1-日期2 = 时长
function getfmtNum(d1,d2,u)
{
 var l;

 var strSeparator = "-";
 var s1;
 var s2;
 s1 = d1.split(strSeparator);
 s2 = d2.split(strSeparator);
 var strDateS = new Date(s1[0] + "/" + s1[1] + "/" + s1[2]);
 var strDateE = new Date(s2[0] + "/" + s2[1] + "/" + s2[2]);
 dt = strDateS-strDateE;

 switch (u)
 {
 case "d":
  l = dt/(24*60*60*1000);
  break;
 case "m":
  l = dt/(24*60*60*1000*30);
  break;
 case "y":
  l = dt/(24*60*60*1000*365);
  break;
 default:
  l = 0;
  break;
 }

 return Math.round(l);
}

function now()
{
 var d=new Date();
 return d.getYear()+"-" +(d.getMonth() + 1) + "-" + d.getDate() ;
}

function calDate(obj,min,max) //验证日期,如正确，则计算出相应的年龄。
{
 //alert(document.forms[0].F003[obj.parentNode.parentNode.rowIndex-1].value+';'+document.forms[0].F004[obj.parentNode.parentNode.rowIndex-1].value);

 if(!checkDateInput(obj,min,max)) return;

 document.forms[0].F004[obj.parentNode.parentNode.rowIndex-1].value=
 getfmtNum(now(),document.forms[0].F003[obj.parentNode.parentNode.rowIndex-1].value,"y");

}

function calAge(obj,min,max) //验证年龄,如正确，则计算出相应的出生日期。
{
 //alert(document.forms[0].F003[obj.parentNode.parentNode.rowIndex-1].value+';'+document.forms[0].F004[obj.parentNode.parentNode.rowIndex-1].value);

 if(!checkIntInput(obj,min,max)) return;

 document.forms[0].F003[obj.parentNode.parentNode.rowIndex-1].value=getfmtDate(new Date(),document.forms[0].F004[obj.parentNode.parentNode.rowIndex-1].value*(-1),"y");
}

function checkDateInput(obj) //用于检查日期输入是否正确 （日期输入范围为1000-01-01 到9999-12-31）
{
 if (obj.value.length==0) return false;
 var objValue=obj.value.replace(/[-/.]/g,"/");

 try
 {
  var a=new Date(objValue);
  if (isNaN(a))
  {
//   obj.value="";
   alert("请注意:/n您输入的日期不正确,请重新输入.");
   obj.focus();
   obj.select();
   return false;
  }

  var b;
  if (a.getFullYear()<1000||a.getFullYear()>9999)
  {
   var Today=new Date();
   b=Today.getFullYear()+"-"+(a.getMonth()+1)+"-"+a.getDate();
  } else if (a.getFullYear()<1000)
   b=(a.getFullYear()+100)+"-"+(a.getMonth()+1)+"-"+a.getDate();
  else
   b=a.getFullYear()+"-"+(a.getMonth()+1)+"-"+a.getDate();
  obj.value=obj.value.replace(/[-/.//]0*/g,"-");

/*  if(b!=obj.value)
  {
   obj.value=b;
   alert("请注意:/n您刚才输入的日期不正确,我们已进行了修改.");
   obj.select();
   obj.focus();
   return false;
  }*/

 }
 catch(Exception)
 {
//  obj.value="";
  alert("请注意:/n您输入的日期不正确,请重新输入.");
  obj.focus();
  obj.select();
  return false;
 }
 return true;
}


function checkDecimalInput(obj,min,max) //作用是将输入变成Number(10,6)格式,默认范围是非负.
{
 obj.value=obj.value.replace(/ /g,""); //去空格
 if (obj.value=="") return false;
 if (obj.value.substr(0,1)==".") obj.value="0"+obj.value;
 if (obj.value.substr(0,2)=="-.") obj.value=obj.value.replace("-.","-0.");
 var r, re;
 var s = obj.value ;
 var theMin=-0.0000001;
 var theMax=10000000000;
 if (min!=null) theMin=min;
 if (max!=null) theMax=max;
 if (s.length==0) return false;
 re = /-{0,1}/d{1,10}/.{0,1}/d{0,6}/i;
 r = s.match(re);     //取数
 if (r==null)
 {
//  obj.value="";
  alert("请注意:/n您输入的数值不正确,请重新输入.");
  obj.focus();
  obj.select();
  return false;
 }
 if ((r>=theMax)||(r<=theMin))
 {
//  obj.value="";
  alert("请注意:/n您输入的数值不正确,请重新输入.");
  obj.focus();
  obj.select();
  return false;
 }
/* if ( r!=s)
 {
  obj.value=r;
  alert("请注意:/n您刚才输入的数值不正确,我们已进行了修改.");
  obj.focus();
  obj.select();
  return false;
 }*/
 obj.value=r;
 return true;
}

function checkIntInput(obj,min,max) //作用是将输入变成整数,默认范围是非负.onblur event
{
 obj.value=obj.value.replace(/ /g,""); //去空格
 if(obj.value=="") return false;
 var r;
 var s = obj.value ;
 var theMin=-1;
 var theMax=10000000000;
 if (min!=null) theMin=min;
 if (max!=null) theMax=max;
 if (s.length==0) return false;
 r = parseInt(s);     //取数
 if (r==null||isNaN(r))
 {
//  obj.value="";
  alert("请注意:/n您输入的数值不正确,请重新输入.");
  obj.focus();
  obj.select();
  return false;
 }
 if ((r>=theMax)||(r<=theMin))
 {
//  obj.value="";
  alert("请注意:/n您输入的数值不正确,请重新输入.");
  obj.focus();
  obj.select();
  return false;
 }
/* if ( r!=s)
 {
  obj.value=r;
  alert("请注意:/n您刚才输入的整数不正确,我们已进行了修改.");
  obj.focus();
  obj.select();
  return false;
 }*/
 obj.value=r;
 return true;
}

function Confirm0()
{
 FormAdd.action="getdata.asp";
 FormAdd.submit();
}

</SCRIPT>
<!-- =================================================================================== -->
<script defer>

function Tonclk(o1,o2)
{
 (o1.style.display=='none')?(o1.style.display='block'):(o1.style.display='none');
 (o1.style.display=='none')?(o2.innerHTML='&#218;'):(o2.innerHTML='&#217;');
}

function createTable(o,ti,tj,cont)
{
 var grow;

 var table=document.createElement("TABLE")

 o.appendChild(table)  ;
 table.id="RoomNumberTypeDetail";
 table.border=0;
 table.style.backgroundColor="green";
 table.cellSpacing=1;
 table.cellPadding=3;
 table.align="center";
 table.width="100%";

 var COL=document.createElement("COL"); table.appendChild(COL); COL.width="5%";
 var COL=document.createElement("COL"); table.appendChild(COL); COL.width="20%";
 var COL=document.createElement("COL"); table.appendChild(COL); COL.width="20%";
 var COL=document.createElement("COL"); table.appendChild(COL); COL.width="15%";
 var COL=document.createElement("COL"); table.appendChild(COL); COL.width="5%";
 var COL=document.createElement("COL"); table.appendChild(COL); COL.width="20%";
 var COL=document.createElement("COL"); table.appendChild(COL); COL.width="10%";
 var COL=document.createElement("COL"); table.appendChild(COL); COL.width="5%";

 var tbody=document.createElement("TBODY")
 table.appendChild(tbody) ;

 var tr=document.createElement("TR");
 tbody.appendChild(tr) ;

 tr.align="center";
 tr.style.cssText="font-size:11pt;font-weight:700;background-color:#DDDDDD";

 for (var j=0;j<=(tj-1);j++){
  var td=document.createElement("TD")  ;
  tr.appendChild(td);

  td.innerText=glc[j];
 }


 for (var i=0;i<=(ti-1);i++){
  var tr=document.createElement("TR");
  tbody.appendChild(tr) ;
  tr.align="center";

  if (i&1) tr.style.cssText="font-size:11pt;color:#333333;background-color:#E7DDE7";
  else  tr.style.cssText="font-size:11pt;color:#333333;background-color:#E7E7DD";

  for (var j=0;j<=(tj-1);j++){
   var td=document.createElement("TD")  ;
   tr.appendChild(td) ;
   switch (j)
   {
   case 0:     //序号
    td.style.cssText= "font-weight:700";
    td.innerHTML= (i+1) ;
    td.align="center";
    break;

   case 1:
    td.innerHTML = "<input name=F00"+j+" value='"+glc[tj+i*tj+j]+"' maxlength=20 onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
    break;

   case 2:
    td.innerHTML = "<input name=F00"+j+" value='"+glc[tj+i*tj+j]+"' maxlength=60 onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
    break;

   case 3:
    td.innerHTML = "<input name=F00"+j+" value='"+glc[tj+i*tj+j]+"' maxlength=10 onblur='calDate(this)' ondblclick='getDateFromDialog(this);' size=12 onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
    break;

   case 4:
    td.innerHTML = "<input name=F00"+j+" value='"+glc[tj+i*tj+j]+"' maxlength=3 onchange='calAge(this)' size=5 onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
    break;

   case 5:
    td.innerHTML = "<input name=F00"+j+" value='"+glc[tj+i*tj+j]+"' maxlength=20 onblur='checkDecimalInput(this)' onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
    break;

   case 6:
    td.innerHTML = "<input name=F00"+j+" value='"+glc[tj+i*tj+j]+"' maxlength=20 onblur='checkIntInput(this)' onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
    break;

   case 7:     //删除标志
    td.innerHTML= "<span class=delbutton onclick='DeleteTr(this,1)'>&#34;</span>";
    break;

   default:
    td.innerHTML = "<input name=F00"+j+" value='"+glc[tj+i*tj+j]+"' maxlength=20 onkeydown='javascript:if(event.keyCode==13)event.keyCode=9' />";
    break;
   }
  }
  tr.onmouseover=function()
  {
   this.style.backgroundColor ="#AAAAFF";
   grow = this.rowIndex+1; //TH
  }
  tr.onmouseout=function()
  {
   if (grow&1) this.style.backgroundColor="#E7DDE7";
   else   this.style.backgroundColor="#E7E7DD";
  }

 }
}


var glc = new Array(
 "序号","姓名","籍贯","生日","年龄","身高","学历","删除",
 "2","22","222","1980-1-1","","22222","","",
 "3","33","333","1987-12-12","","33333","",""
 );

createTable(T4,2,8,glc);


</SCRIPT>

</body> 

 

 

以下是提交后的处理程序getdata.asp:

<%@ LANGUAGE="VBSCRIPT"%>
<!-- #include file = "../adovbs.inc"-->
<%
' getdata.asp

 response.expires=0
response.write("Request.Form:<BR/>")
For Each item In Request.Form("GLC")

'response.write("Request.querystring<BR/>")
'For Each item In Request.querystring("GLC")

 Response.Write item & "<BR>"
Next

%>

-布谷鸟-
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值