0顶

实现对表格操作功能的js脚本

稿源：互联网 2022-06-24 19:04:42 点击： 1121 撤稿纠错

功能很强大，可以动态添加行和位置移动，还支持删除功能。

以下讨论的是和相关的实现对表格操作功能的js脚本教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<HTML>
<HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<STYLE type=text/css>BODY {
BACKGROUND: white; COLOR: black; font:menu
}
.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:menu
}
.controlPanelMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; font:menu
}
.delMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; font:menu
}
.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
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("medication")[line].className="tableDataHit";
  if (oldLine>0)
  {
   document.all.tdt[oldLine].className="tableData";
   document.ecform("medication")[oldLine].className="tableData";
  }
  currentLine=ln
}
}
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function move(direc){
//向下移动direc行，并将移动到的行高亮度显示
    if(line+direc<1 || (line+direc)>document.all.tdt.length-1) return;
    var temp=document.ecform.medication[line].value;
    document.ecform.medication[line].value=document.ecform.medication[line+direc].value;
    document.ecform.medication[line+direc].value=temp
 //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
    line+=direc;
    lightOn(line);
}
function delIt()
{
line=parseInt(event.srcElement.ln,10)
if (line>0)
  for (i=1;i<PLList.rows.length;i++)
   if (tdt[i].ln==line)
   {
    if ( document.ecform.medication[i].value.length>0 )
     if (!confirm("Are you sure you want to delete this record?"))
      return
    PLList.deleteRow(i)
   }
}
function modifiedIt(field)
{
// field.value=checkText(field.value);
modified=1
line=parseInt(event.srcElement.ln,10)
if (line>0)
   for (i=1;i<PLList.rows.length;i++)
    if (tdt[i].ln==line)
     document.ecform.edit[i].value=1
}
function newHospitalVisit()
{
newRow=PLList.insertRow(PLList.rows.length);
newRow.id="tdt";
newRow.ln=allCount;
newRow.bgColor="#e0e0e0";
newRow.className="tableData";
newRow.onclick=lightOn;
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
c1=newRow.insertCell(0);
c1.id="delItem";
c1.ln=allCount;
c1.className="scheduleButtonVisible";
c1.onclick=delIt;
c1.onmouseover=mouseOver;
  c1.onmouseout=mouseOut;
c1.innerHTML="<input type=hidden name=PLID value=0><input type='hidden' name='edit' value=0>";
c2=newRow.insertCell(1);
c2.ln=allCount;
c2.innerHTML="<input type=text size=58 maxlength=100 name=medication ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
allCount++
}
function mouseOver()
{
event.srcElement.className="delMouseOver"
}
function mouseOut()
{
event.srcElement.className="scheduleButtonVisible"
}
</SCRIPT>
</HEAD>
<BODY bgColor="white">
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<FORM method="post" name="ecform">
  <META content="MSHTML 5.00.2920.0" name="GENERATOR">
  <DIV id=div1 style="LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 658px">
    <TABLE bgColor="silver" border=2 borderColorDark=gray borderColorLight=silver cellPadding=2 cellSpacing=1 cols=1 id=PLList rules=rows width="100%">
      <TBODY>
      <TR bgColor="#0a6846" id="tdt">
        <TH width=80><FONT color=white>删除
          <INPUT name="PLID" type="hidden">
          <INPUT name="edit" type="hidden">
          </FONT></TH>
        <TH width="559">
          <INPUT name="medication" type="hidden">
          <FONT
      color=white>变化表格 </font>
      </TR>
      <TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="1">
        <TD class="scheduleButtonVisible" onclick="delIt()" onmouseout="mouseOut()" onmouseover="mouseOver()" ln="1" width="80"><FONT size=2>
          <INPUT name="PLID" type="hidden" value="54" ln="1">
          <INPUT name="edit" type="hidden" value="0">
          </FONT></TD>
        <TD ln="1" width="559">
          <INPUT class="tableData" maxLength="100" name="medication"onkeyup="modifiedIt(this)" size="58" value="like it?" ln="1">
        </TD>
      </TR>
      <TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="2">
        <TD class="scheduleButtonVisible" onclick="delIt()" onmouseout="mouseOut()" onmouseover="mouseOver()" ln="2" width="80"><FONT size=2>
          <INPUT name="PLID" type="hidden" value="55" ln="2">
          <INPUT name="edit" type="hidden" value="0">
          </FONT></TD>
        <TD ln="2" width="559">
          <INPUT class="tableData" maxLength="100" name="medication" onkeyup="modifiedIt(this)" size="58" value="how about it?" ln="2">
        </TD>
      </TR>
      <TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="3">
        <TD class="scheduleButtonVisible" onclick="delIt()" onmouseout="mouseOut()" onmouseover="mouseOver()" ln="3" width="80"><FONT size=2>
          <INPUT name="PLID" type="hidden"value="56" ln="3">
          <INPUT name="edit" type="hidden" value="0">
          </FONT></TD>
        <TD ln="3" width="559">
          <INPUT class="tableData" maxLength="100" name="medication" onkeyup="modifiedIt(this)" size="58" ln="3">
        </TD>
      </TR>
      </TBODY>
    </TABLE>
    <SCRIPT>
allCount=4
</SCRIPT>
    <TABLE align="center" border="1" borderColorDark="white" borderColorLight="gray" cellPadding="1" cellSpacing="1" class="controlPanel" cols="4" rules="all" width="100%" nowrap>
      <TBODY>
      <TR>
        <TD align="middle" class="controlPanel" onclick="newHospitalVisit()" onmouseout="this.className='controlPanel'" onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">添加一行</font></TD>
      </TR>
      <TR>
        <TD align="middle" class="controlPanel" onclick="move(-1)" onmouseout="this.className='controlPanel'" onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">向上移动</font></TD>
      </TR>
      <TR>
        <TD align="middle" class="controlPanel" onclick="move(1)" onmouseout="this.className='controlPanel'" onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">向下移动</font></TD>
      </TR>
      </TBODY>
    </TABLE>
  </DIV>
</FORM>
</BODY>
</HTML>

关于实现对表格操作功能的js脚本的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016318262554.shtml方便下次再访问哦。

·上一篇： 拆分单元格js代码
·下一篇： 在网页中插入表格js脚本

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

实现对表格操作功能的js脚本

文章分类LIST >>返回首页

最新游戏

最新新闻