大雀软件园

最新软件 | 热门专题 |
网站导航

软件频道

软件下载 文章资讯 驱动大全

安卓市场

安卓应用 安卓游戏

苹果市场

苹果应用 苹果游戏

游戏下载

电脑游戏 单机游戏 安卓游戏

专题合集

软件专题 苹果专题 安卓专题

快速通道

最新软件 下载排行 下载分类 下载专题
软件
  • 软件
  • 安卓
  • 苹果
  • 专题
搜 索

首页 软件下载 安卓市场 苹果市场 电脑游戏 安卓游戏 文章资讯 驱动下载
技术开发 网页设计 图形图象 数据库 网络媒体 网络安全 站长CLUB 操作系统 媒体动画 安卓相关
当前位置： 首页 -> 技术开发 -> Script -> JavaScript实现在线编辑表格

JavaScript实现在线编辑表格

时间： 2021-07-31 作者：daque

 ======javascript在线表格演练======

华夏

美利坚合众国

英国

题目一

题目二

题目三

注：第一列单击弹出下拉框采用；在表格结果一条龙，按下“下箭镞”不妨减少一个新的空行;运用回车键不妨向下遍历所有表格

*****=====下列按钮按照须要选定运用======*****

=====另一个范例=====

题目一

题目二

题目三

*****=====下列按钮按照须要选定运用======*****

 

 

 

=====以次为代码清单=====

======onlineedittable.html======

<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=utf8"><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=silvercellpadding=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=silvercellpadding=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><p align=center><font size="2">*****=====下列按钮按照须要选定运用======*****</font></p>

<p align=center><input type=button onclick="addrow(tableresource)" value="增添空数据行"><input type=button onclick="addinstancerow(tableresource,['x','y','z'],['1','100','这是一个尝试的例子'])" value="增添范例数据行"><input type=button onclick="deleterow(tableresource)" value="简略"><input type=button onclick="clearrow(tableresource)" value="简略十足"><input type=button onclick="setonlineeditcheckbox(tableresource,true)" value="选中十足"></p>

</body></html>

 

 

======onlineedittable.js======

//全部变量var inputfocus;//该变量记载暂时中心的inputvar bkeydown=false;//记载键盘被按下的状况，当有键盘按下时其值为true

function setrowclass(obj,classname){ obj.classname=classname; var oldclass,toclass; if(classname=="tabledata")  {oldclass="inputtabledatahit";toclass="inputtabledata";} if(classname=="tabledatahit") {oldclass="inputtabledata";toclass="inputtabledatahit";} var objsinput=obj.all; for(var i=0;i<objsinput.length;i++)  if(objsinput[i].tagname=="input")if(objsinput[i].classname==oldclass)objsinput[i].classname=toclass;}

function lightonrow(obj){ if(obj.tagname!="tr")return;

 //将一切未被选中的行废除高亮度实际        var tableonlineedit=obj.parentelement;        while(tableonlineedit.tagname!="table")tableonlineedit=tableonlineedit.parentelement; var objscheckbox=tableonlineedit.all("checkline"); for(var icheckbox=1;icheckbox<objscheckbox.length;icheckbox++)  if(objscheckbox[icheckbox].checked==false) setrowclass(tableonlineedit.rows[icheckbox+1],"tabledata");

 //暂时点击行高亮度表露 setrowclass(obj,"tabledatahit");}

//获得obj的上司元素tagnamefunction getupperobj(obj,tagname){ var strtagname=tagname.touppercase(); var objupper=obj.parentelement; while(objupper){  if(objupper.tagname==strtagname) break;  objupper=objupper.parentelement; } return objupper;}

function getposition(obj,pos){   var t=eval("obj."+pos);   while(obj=obj.offsetparent){      t+=eval("obj."+pos);   }   return t;}function showinputselect(obj,objshow){ inputfocus=obj;//记载暂时中心input至全部变量 objshow.style.top =getposition(obj,"offsettop")+obj.offsetheight+2; objshow.style.left=getposition(obj,"offsetleft"); objshow.style.width=obj.offsetwidth; objshow.value=obj.value; objshow.style.display="block";}

function setinputfromselect(objto,objshow){ objto.value=objshow.options[objshow.selectedindex].value; //objshow.style.display="none";}

function hideinput(obj){ obj.style.display="none";}

function clearrow(objtable){  var tbodyonlineedit=objtable.getelementsbytagname("tbody")[0];  for (var i=tbodyonlineedit.children.length-1;i>=0;i--)    tbodyonlineedit.deleterow(i);}

function deleterow(objtable){ var tbodyonlineedit=objtable.getelementsbytagname("tbody")[0]; for (var i=tbodyonlineedit.children.length-1; i>=0 ; i-- )  if (tbodyonlineedit.children[i].firstchild.firstchild.checked)   tbodyonlineedit.deleterow(i);}

function addrow(objtable){ var tbodyonlineedit=objtable.getelementsbytagname("tbody")[0]; var theadonlineedit=objtable.getelementsbytagname("thead")[0]; var elm = theadonlineedit.lastchild.clonenode(true); elm.style.display=""; tbodyonlineedit.insertbefore(elm);}

//将指定命据行的objrow的输出域strname树立为strvaluefunction setinputvalue(objrow,strname,strvalue){ var objs=objrow.all; for(var i=0;i<objs.length;i++){  if(objs[i].name==strname)objs[i].value=strvalue; }}

//增添一个范例数据行function addinstancerow(objtable,names,values){ var tbodyonlineedit=objtable.getelementsbytagname("tbody")[0]; var theadonlineedit=objtable.getelementsbytagname("thead")[0]; var elm = theadonlineedit.lastchild.clonenode(true) elm.style.display="";        for(var i=0;i<names.length;i++)          setinputvalue(elm,names[i],values[i]); tbodyonlineedit.insertbefore(elm);}

//将十足复选框设为指定值function setonlineeditcheckbox(obj,value){ var tbodyonlineedit=obj.getelementsbytagname("tbody")[0]; for (var i=tbodyonlineedit.children.length-1; i>=0 ; i-- )  tbodyonlineedit.children[i].firstchild.firstchild.checked=value;}

//为动静表格减少键盘导航功效,要运用该功效请在表格设置中减少事变处置onkeydown="navigatekeys()" onkeyup="setkeydown(false)"//有一点点题目，当按下"->"跳转到下一输出域时，光标表露在第一个字符之后//倡导仍旧运用tab键跳转function navigatekeys(){ if(bkeydown) return; bkeydown=true; var elm=event.srcelement; if(elm.tagname!="input") return;//默许只对input举行导航，可自行设定

 var objtd=elm.parentelement; var objtr=objtd.parentelement; var objtbody=objtr.parentelement.parentelement; var objtable=objtbody.parentelement;

 var nrow=objtr.rowindex; var ncell=objtd.cellindex;

 var nkeycode=event.keycode; switch(nkeycode){  case 37://<-   if(getcursorposition(elm)>0)return;   ncell--;   if(ncell==0){    nrow--;//跳转到上一条龙    ncell=objtr.cells.length-1;//结果一列   }   break;  case 38://^   nrow--;   break;  case 39://->   if(getcursorposition(elm)<elm.value.length)return;   ncell++;   if(ncell==objtr.cells.length){        nrow++;//跳转到下一条龙首场所    ncell=1;//第一列   }   break;  case 40://\|/   nrow++;   if(nrow==objtbody.rows.length){        addrow(objtable);//减少一个空行    ncell=1;//跳转到第一列   }   break;  case 13://enter   ncell++;   if(ncell==objtr.cells.length){        nrow++;//跳转到下一条龙首场所    ncell=1;//第一列   }   if(nrow==objtbody.rows.length){        addrow(objtable);//减少一个空行    ncell=1;//跳转到第一列   }

   break;  default://do nothing   return; } if(nrow<2 || nrow>=objtbody.rows.length || ncell<1 ||ncell>=objtr.cells.length) return;

 objtr=objtbody.rows[nrow]; objtd=objtr.cells[ncell]; var objs=objtd.all; for(var i=0;i<objs.length;i++){  //此处运用ojbs[0],本质运用时大概须要加以窜改,或介入其余前提  try{   lightonrow(objtr);   objs[i].focus();//setcursorposition(objs[i],-1);   return;  }catch(e){   continue;   //if error occur,continue to next element  } }//end for objs.length}

//树立键盘状况，即bkeydown的值function setkeydown(status){ bkeydown=status;}

//获得光目标场所function getcursorposition(obj){ var qswh="@#%#^&#*$" obj.focus(); rng=document.selection.createrange(); rng.text=qswh; var nposition=obj.value.indexof(qswh) rng.movestart("character", -qswh.length) rng.text=""; return nposition;}

//树立光标场所function setcursorposition(obj,position){ range=obj.createtextrange();  range.collapse(true);  range.movestart('character',position);  range.select();}

 

 

======onlineedittable.css======

.thdata{background:0a6846;}.tabledata {background: white; border-bottom: white 1px dashed; border-left: white 1px dashed; border-right: white 1px dashed; border-top: white 1px dashed; color: black; cursor: hand; font-family: verdana,arial,helvetica; font-size: 12px}.inputtabledata {background: white; border-bottom: white 1px dashed; border-left: white 1px dashed; border-right: white 1px dashed; border-top: white 1px dashed; color: black; cursor: hand; font-family: verdana,arial,helvetica; font-size: 12px;width:100%;}.tabledatasel {background: #6090d0; border-bottom: #6090d0 1px dashed; border-left: #6090d0 1px dashed; border-right: #6090d0 1px dashed; border-top: #6090d0 1px dashed; color: white; cursor: hand; font-family: verdana,arial,helvetica; font-size: 12px}.tabledatahit {background: #d0e0ff; border-bottom: #d0e0ff 1px dashed; border-left: #d0e0ff 1px dashed; border-right: #d0e0ff 1px dashed; border-top: #d0e0ff 1px dashed; color: black; cursor: hand; font-family: verdana,arial,helvetica; font-size: 12px}.inputtabledatahit {background: #d0e0ff; border-bottom: #d0e0ff 1px dashed; border-left: #d0e0ff 1px dashed; border-right: #d0e0ff 1px dashed; border-top: #d0e0ff 1px dashed; color: black; cursor: hand; font-family: verdana,arial,helvetica; font-size: 12px;width:100%}.tabledataover {background: #d0e0ff; border-bottom: #d0e0ff 1px dashed; border-left: #d0e0ff 1px dashed; border-right: #d0e0ff 1px dashed; border-top: #d0e0ff 1px dashed; color: black; cursor: hand; font-family: verdana,arial,helvetica; font-size: 12px}.schedulebuttonvisible {background: silver; border-bottom: gray 1px dashed; border-left: white 1px dashed; border-right: gray 1px dashed; border-top: white 1px dashed; color: black; cursor: hand; font-family: webdings; font-size: 12px

}

相关推荐

推荐下载

热门阅览

最新排行

关于我们| 网站地图| 广告合作| 下载帮助| 下载声明

Copyright © 2019-2021 大雀软件园(www.daque.cn) All Rights Reserved.