======JavaScript在线表格演示======

注：第一列单击弹出下拉框选择；在表格最后一行，按下“下箭头”可以增加一个新的空行;使用回车键可以向下遍历整个表格

*****=====下列按钮根据需要选定使用======*****

*****=====下列按钮根据需要选定使用======*****

=====以下为代码清单=====

====== c>
<LINK href="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/src=" >
<opti>中国</opti>美国</opti>英国</opti>
<TABLE bgColor=silver border=2 borderColorDark=gray borderColorLight=silver
cellPadding=2 cellSpacing=1 cols=1 id=table >
<thead>

<tr bgColor=#0a6846>
 <th class=thData width=1%><input type=checkbox id=checkLineAll bgColor=#e0e0e0 class=tableData >注：第一列单击弹出下拉框选择；在表格最后一行，按下“下箭头”可以增加一个新的空行;使用回车键可以向下遍历整个表格</p>
<p align=center><f>*****=====下列按钮根据需要选定使用======*****</f value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/添加空数据行">
<input type=butt value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/添加实例数据行">
<input type=butt value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/删除">
<input type=butt value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/删除全部">
<input type=butt value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/submit Form">
<input type=butt value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/Reset">
</p>

============================另一个实例=================================
<form acti>
<TABLE bgColor=silver border=2 borderColorDark=gray borderColorLight=silver
cellPadding=2 cellSpacing=1 cols=1 id=tableResource rules=rows width="100%" >
<thead>

<tr bgColor=#0a6846>
 <th class=thData width=1%><input type=checkbox id=checkLineAll bgColor=#e0e0e0 class=tableData >*****=====下列按钮根据需要选定使用======*****</f value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/添加空数据行">
<input type=butt value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/添加实例数据行">
<input type=butt value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/删除">
<input type=butt value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/删除全部">
<input type=butt value="http://www.dedecms.com/web-art/htmlbase/Javascript/20030531/选中全部">
</p>

</body>
</html>

======)  {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;
}

functi)return;

 //将所有未被选中的行取消高亮度现实
        var table)table;
}

functi;
}

functi;
}

functi;
 tbody;
        for(var i=0;i<Names.length;i++)
          setInputValue(elm,Names[i],Values[i]);
 tbody
//有一点点问题，当按下"->"跳转到下一输入域时，光标显示在第一个字符之后
//建议仍然使用Tab键跳转
functi) 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(getCursorPositi
 obj.focus();
 rng=document.selecti;
 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
}

选择5ucms.org 选择未来