======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 选择未来
上一篇:5ucms教程,根据客户端的分辨率不同而重定向到不同网页的脚本 下一篇:5ucms培训,Javascript技术实现真正的网上试听 |
|
本站声明:本网站所载文章等内容,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权及其它问题,请在30日内与本网联系(Email:3876307#qq.com),我们将在第一时间删除内容。若原创内容转载请注明出处。 5ucms模版,JavaScript实现在线编辑表格的关键词: |