您的位置:首页 >> Web开发 >> JavaScript >> 正文
JavaScript RSS
 

JavaScript实现在线编辑表格

http://www.rdxx.com 06年05月28日 17:54 互联网 我要投稿

关键词: 在线编辑 , JavaScript , 表格 , IP , , Java , 编辑 , 在线

JavaScript版经常看到有人关于在线可编辑表格的问题,于是整理了出来。

主要功能:

1.动态增加行

2.可以点击表格左边的按钮删除当前行,如果该行有数据会要求用户确认删除

3.表格可以实现动态编辑

4.通过点击某一行可以实现高亮度显示

源代码:

===================================

<HTML>
<HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>BODY {
BACKGROUND: white; COLOR: black; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.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
}
.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
}
.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
}
.controlPanel {
BACKGROUND: silver; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.controlPanelMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.delMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.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
}
</STYLE>
<SCRIPT language=javascript>
var modified=0
var currentLine=-1//该变量似乎保存"ln"属性;lightOn函数中line记录实际行数
var line=-1;
function lightOn(ln)
{
if (ln==null)
  ln=parseInt(event.srcElement.ln,10)
for (i=1;i<PLList.rows.length;i++)
  if (tdt[i].ln==ln)
   line=i
cln=currentLine
oldLine=-1
for (i=1;i<PLList.rows.length;i++)
  if (tdt[i].ln==cln)
   oldLine=i
if (line==oldLine)
  return
//if td <0 then only clear all title
if (line>0)
{
  document.all.tdt[line].className="tableDataHit";
  document.ecform("date")[line].className="tableDataHit";
  document.ecform("diagnosis")[line].className="tableDataHit";
  document.ecform("medication")[line].className="tableDataHit";
  if (oldLine>0)
  {
   document.all.tdt[oldLine].className="tableData";
   document.ecform("date")[oldLine].className="tableData";

共5页  1 2 3 4 5

 
 
标签: 在线编辑 , JavaScript , 表格 , IP , , Java , 编辑 , 在线 打印本文
 
 
  热点搜索
 
 
 



Valid XHTML 1.0 Transitional
Copyright ©2005 - 2008 Rdxx.Com,All Rights Reserved
收藏本页
收藏本站