动态增加表格问题

<head><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
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
}
}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

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;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><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><p><b>Collected by 38JS.COM</b></p>

解决方案 »

  1.   


    <html>
    <head>
    <title> 动态表格实例</title>
    <style>
    .curr {background-color:blue;color:white}
    </style>
    <script language="JavaScript">
    var curRow = null;function setrow(){
     var e = event.srcElement;
     if(e.tagName=="TD" && tab1.contains(e)){
       curRow = e.parentNode;
       updateRow();
     }
     else curRow=null;
    }function doEdit(bSave){
     if(curRow==null) return;
     var i;
     for(var i=0; i<curRow.cells.length;i++){
      if(bSave)
      curRow.cells[i].innerText = document.getElementsByName("txt")[i].value;
      else
      document.getElementsByName("txt")[i].value = curRow.cells[i].innerText;
      }
    }function doInsert(){
      var r=tab1.insertRow();
      for(var i=0; i<tab1.rows[0].cells.length;i++){
        r.insertCell(i).innerText = document.getElementsByName("txt")[i].value;
      }
      curRow = r;
      updateRow();
    }
    function doDelete(){
     if(tab1.rows.length<2 || !curRow) return;
     curRow.removeNode(true);
     curRow=null;
     updateRow();
    }
    function updateRow(){
      var rows=tab1.rows;
      for(var i in rows)
        rows[i].className = (curRow==rows[i]) ? "curr" : ""
    }
    </script>
    </head>
    <body>
    动态表格实例<br/>
    <table id=tab1 border=1 width=500 onclick="setrow()">
    <tr><td>00</td><td>01</td><td>02</td></tr>
    <tr><td>10</td><td>11</td><td>12</td></tr>
    <tr><td>20</td><td>21</td><td>22</td></tr>
    <tr><td>30</td><td>31</td><td>32</td></tr>
    </table>
    <input name=txt><input name=txt><input name=txt><br/>
    <button onclick="doEdit(false)">Edit</button>
    <button onclick="doEdit(true)">Save</button>
    <button onclick="doInsert()">Insert</button>
    <button onclick="doDelete()">delete</button>
    </body>
    </html>
      

  2.   

    你在body的onload事件加上插入行的函数就行了
      

  3.   

    <SCRIPT LANGUAGE=javascript>
    function delCol() {
    try {
    var Elm = event.srcElement;
    while(Elm && Elm.tagName != "TR") {
    Elm = Elm.parentElement;
    }
    if(Elm.parentElement.rows.length <= 1) {
    alert("无法删除！");
    return;
    }
    Elm.parentElement.deleteRow(Elm.rowIndex-1);
    } catch(e) {
    alert("Err 5001:\r\n" + e);
    }
    }
    function addCol(id) {
    try {
    var oTable = document.getElementById(id);
    if(oTable.tagName != "TABLE")
      alert("Err 5002");
    var oList = oTable.children;
    var oTBODY;
    for(var i=0;i<oList.length;i++) {
    if(oList[i].tagName == "TBODY") {
    oTBODY = oList[i];
    break;
    }
    }
    var oTR = oTBODY.lastChild;
    var newTR = oTR.cloneNode(true);
    addId(newTR);
    oTBODY.insertAdjacentElement("beforeEnd",newTR);
    } catch(e) {
    alert("Err 5002:\r\n" + e);
    }
    }
    function addId(node) {
    try {
    if(!node.hasChildNodes()) {
    var prefix = node.getAttribute("id").split("_")[0];
    var postfix = node.getAttribute("id").split("_")[1];
    postfix = parseInt(postfix) + 1;
    node.setAttribute("id",prefix + "_" + postfix);
    node.setAttribute("value","");
    return;
    }
    } catch(e) {}
    try {
    var oList = node.childNodes;
    for(var i=0;i<oList.length;i++) {
    addId(oList[i]);
    }
    } catch(e) {
    alert("Err 5003:\r\n" + e);
    }
    }
    </SCRIPT>
    <table width="100%" border="1" align="center" cellpadding="3" cellspacing="1" bordercolor="#000000" class="tableprintable" id="t1">
    <thead><tr><td>fason1</td><td>fason2</td><td>fason3</td></tr></thead>               
     <tr align="center" class="tdbg0"> 
                       <td class="tdbg0" colspan=2>1</td><td><button class="button" onClick="delCol()"> 
                        删除</button></td>
                    </tr>
                  </table>
                  <button class="button" onClick="addCol('t1')">添加一行</button>
                </td>
              </tr>
            </table>
      

  4.   

    我的表头是静态的，
    fuction add()
    {
       t.insertRow();
    }
    <table id="t">
       <tr>
          <td>a1</td>
          <td>a1</td>
          <td>a1</td>
          
       </tr>
       /////这里怎么写
    </table>
      

  5.   

    <body onload="addrow()">
    <SCRIPT LANGUAGE=javascript>
    function addrow() {
    var t=document.getElementById("t1")
    for(i=0;i<10;i++){
    var tem=t.insertRow()
    for(j=0;j<t.rows[0].cells.length;j++)tem.insertCell().innerText='fason'+i+j
    }
    }
    </script><table width="100%" border="1" align="center" cellpadding="3" cellspacing="1" bordercolor="#000000" class="tableprintable" id="t1">
    <thead><tr><td>fason1</td><td>fason2</td><td>fason3</td></tr> </thead>              
    </table>