关于如何实现在表格中动态新增一行？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
function insertRow()
{
var y = tab1.rows.length
var row = tab1.insertRow(y);
var cell;
for(i=0;i<tab1.rows[y-1].cells.length;i++)
{
cell = row.insertCell(i);
//cell.innerHTML='<input type="text" name="textfield' + y + i +'">'
cell.innerHTML='&nbsp;'
}  
}
</script>
</head><body>
<table width="75%" id="tab1" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#FFFFFF" bordercolordark="#000000">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<input type="button" name="Button" value="添加一行" onClick="insertRow()">
</body>
</html>

解决方案 »

  1.   

    <H2>Table Editor</H2><BR>
    <H3>Single click to select a cell, alt-click to select a row</H3><BR>
    <DIV id=TableContainer>
    <TABLE id=TheTable style="TABLE-LAYOUT: fixed; BORDER-COLLAPSE: collapse" 
    border=1>
    <TBODY>
    <TR>
    <TD>Cell 1,1</TD>
    <TD>Cell 1,2</TD>
    <TD>Cell 1,3</TD></TR>
    <TR>
    <TD>Cell 2,1</TD>
    <TD>Cell 2,2</TD>
    <TD>Cell 2,3</TD></TR>
    <TR>
    <TD>New Cell</TD></TR>
    <TR>
    <TD>Cell 3,1</TD>
    <TD>Cell 3,2</TD>
    <TD>Cell 3,3</TD></TR></TBODY></TABLE></DIV><BR><BR><BR><INPUT id=ButtonAddRow style="WIDTH: 200px" disabled onclick=addRow() type=button value="Add Row"><BR><INPUT id=ButtonRemoveRow style="WIDTH: 200px" disabled onclick=removeRow() type=button value="Remove Row"><BR><INPUT id=ButtonAddCell style="WIDTH: 200px" disabled onclick=addCell() type=button value="Add Cell"><BR><INPUT id=ButtonRemoveCell style="WIDTH: 200px" disabled onclick=removeCell() type=button value="Remove Cell"><BR><INPUT id=ButtonMoveUp style="WIDTH: 200px" disabled onclick=moveUp() type=button value="Move Up"><BR><INPUT id=ButtonMoveDown style="WIDTH: 200px" disabled onclick=moveDown() type=button value="Move Down"><BR><INPUT id=ButtonMoveLeft style="WIDTH: 200px" disabled onclick=moveLeft() type=button value="Move Left"><BR><INPUT id=ButtonMoveRight style="WIDTH: 200px" disabled onclick=moveRight() type=button value="Move Right"><BR><INPUT id=ButtonEditContents style="WIDTH: 200px" disabled onclick=editContents(); type=button value="Edit Contents"> <INPUT id=EditCell style="DISPLAY: none; WIDTH: 400px"><BR><INPUT id=ButtonEditStyle style="WIDTH: 200px" onclick=editStyle(); type=button value="Edit Table Style"> 
    <INPUT id=EditStyle style="DISPLAY: none; WIDTH: 400px"><BR>
    <SCRIPT>
    var lastSelection = null;ButtonAddRow.setExpression("disabled", "nothingSelected(lastSelection)");
    ButtonRemoveRow.setExpression("disabled", "! rowSelected(lastSelection)");
    ButtonAddCell.setExpression("disabled", "nothingSelected(lastSelection)");
    ButtonRemoveCell.setExpression("disabled", "! cellSelected(lastSelection)");
    ButtonMoveUp.setExpression("disabled", "! rowSelected(lastSelection)");
    ButtonMoveDown.setExpression("disabled", "! rowSelected(lastSelection)");
    ButtonMoveLeft.setExpression("disabled", "! cellSelected(lastSelection)");
    ButtonMoveRight.setExpression("disabled", "! cellSelected(lastSelection)");
    ButtonEditContents.setExpression("disabled", "(! cellSelected(lastSelection)) || (EditCell.style.display == '')");
    ButtonEditStyle.setExpression("disabled", "(EditStyle.style.display == '')");
    ButtonEditStyle.setExpression("value", "'Edit ' + whatIsSelected(lastSelection) + ' Style'");function select(element) {
      var e, r, c;
      if (element == null) {
        e = window.event.srcElement;
      } else {
        e = element;
      }
      if ((window.event.altKey) || (e.tagName == "TR")) {
        r = findRow(e);
        if (r != null) {
          if (lastSelection != null) {
            deselectRowOrCell(lastSelection);
          }
          selectRowOrCell(r);
          lastSelection = r;
        }
      } else {
        c = findCell(e);
        if (c != null) {
          if (lastSelection != null) {
            deselectRowOrCell(lastSelection);
          }
          selectRowOrCell(c);
          lastSelection = c;
        }
      }  window.event.cancelBubble = true;
    } TableContainer.onclick = select;function cancelSelect() {  if (window.event.srcElement.tagName != "BODY") 
        return;  if (lastSelection != null) {
        deselectRowOrCell(lastSelection);
        lastSelection = null;
      }
    }document.onclick = cancelSelect;function findRow(e) {
      if (e.tagName == "TR") {
        return e;
      } else if (e.tagName == "BODY") {
        return null;
      } else {
        return findRow(e.parentElement);
      }
    }function findCell(e) {
      if (e.tagName == "TD") {
        return e;
      } else if (e.tagName == "BODY") {
        return null;
      } else {
        return findCell(e.parentElement);
      }
    }function deselectRowOrCell(r) {
      r.runtimeStyle.backgroundColor = "";
      r.runtimeStyle.color = "";
      //r.runtimeStyle.fontFamily = "Verdana";
    }function selectRowOrCell(r) {
      r.runtimeStyle.backgroundColor = "darkblue";
      r.runtimeStyle.color = "white";
      //r.runtimeStyle.fontFamily = "Verdana";
    }function addRow() {
      var r, p, nr;
      if (lastSelection == null) {
        r = null;
        p = TheTable.children[0];
      } else {
        r = lastSelection;    if (r.tagName == "TD") {
          r = r.parentElement;
        }    p = r.parentElement;
      }  nr = document.createElement("TR");  p.insertBefore(nr, r);  select(nr);  addCell();  return nr;    
    }
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript">
    function insertRow()
    {
    var y = tab1.rows.length
    var row = tab1.insertRow(y);
    var cell;
    for(i=0;i<tab1.rows[y-1].cells.length;i++)
    {
    cell = row.insertCell(i);
    //cell.innerHTML='<input type="text" name="textfield' + y + i +'">'
    cell.innerHTML='&nbsp;'
    }  
    }
    </script>
    </head><body>
    <table width="75%" id="tab1" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#FFFFFF" bordercolordark="#000000">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <input type="button" name="Button" value="添加一行" onClick="insertRow()">
    </body>
    </html>
      

  3.   

    function removeRow() {
      var r, p, nr;
      if (lastSelection == null)
        return false;  r = lastSelection;  if (r.tagName == "TD") {
        r = r.parentElement;
      }  p = r.parentElement;  p.removeChild(r);  lastSelection = null;
     
      return r; 
    }function addCell() {
      var r, p, c, nc, text;
      if (lastSelection == null)
        return false;  r = lastSelection;  if (r.tagName == "TD") {
        r = r.parentElement;
        c = lastSelection;
      } else {
        c = null;
      }  nc = document.createElement("TD");
      text = document.createTextNode("New Cell");  nc.insertBefore(text, null);
      r.insertBefore(nc, c);  select(nc);  return nc;
    }function removeCell() {
      var c, p, nr;
      if (lastSelection == null)
        return false;  c = lastSelection;  if (c.tagName != "TD") {
        return null;
      }  p = c.parentElement;  p.removeChild(c);  lastSelection = null;
     
      return c; 
    }function editContents() {
      var c, p, nr;
      if (lastSelection == null)
        return false;  c = lastSelection;  if (c.tagName != "TD") {
        return null;
      }  EditCell.style.display = "";  EditCell.value = c.innerHTML;  c.setExpression("innerHTML", "EditCell.value");  EditCell.focus();  EditCell.onblur = unhookContentsExpression;
    }function unhookContentsExpression() {
      lastSelection.removeExpression("innerHTML");
      EditCell.value = '';
      EditCell.style.display = "none";
    }function editStyle() {
      var c;  if (lastSelection == null) {
        c = TheTable;
      } else {
        c = lastSelection;
      }
      
      EditStyle.style.display = "";  EditStyle.value = c.style.cssText;  c.style.setExpression("cssText", "EditStyle.value");  EditStyle.focus();  EditStyle.onblur = unhookStyleExpression;
    }function unhookStyleExpression() {
      var c;  if (lastSelection == null) {
        c = TheTable;
      } else {
        c = lastSelection;
      }
      c.style.removeExpression("cssText");  EditStyle.value = '';
      EditStyle.style.display = "none";
    }function moveUp() {
      var r, p, ls;
      if (lastSelection == null)
        return false;  r = lastSelection;  if (r.tagName != "TR") {
        return null;
      }  if (r.rowIndex == 0) 
        return;  ls = r.previousSibling;  p = ls.parentElement;  p.insertBefore(r, ls);  return r;
    }function moveDown() {
      var r, p, ls;
      if (lastSelection == null)
        return false;  r = lastSelection;  if (r.tagName != "TR") {
        return null;
      }  ls = r.nextSibling;  if (ls == null)
        return null;  p = ls.parentElement;  ls = ls.nextSibling;  p.insertBefore(r, ls);  return r;
    }function moveLeft() {
      var c, p, ls;
      if (lastSelection == null)
        return false;  c = lastSelection;  if (c.tagName != "TD") {
        return null;
      }  ls = c.previousSibling;  if (ls == null)
        return null;  p = ls.parentElement;  p.insertBefore(c, ls);  return c;
    }function moveRight() {
      var c, p, ls;
      if (lastSelection == null)
        return false;  c = lastSelection;  if (c.tagName != "TD") {
        return null;
      }  ls = c.nextSibling;  if (ls == null)
        return null;  p = ls.parentElement;  ls = ls.nextSibling;  p.insertBefore(c, ls);  return c;
    }function nothingSelected() {
      return (lastSelection == null);
    }function rowSelected() {
      var c;
      if (lastSelection == null)
        return false;  c = lastSelection;  return (c.tagName == "TR")
    }function cellSelected() {
      var c;
      if (lastSelection == null)
        return false;  c = lastSelection;  return (c.tagName == "TD")
    }function whatIsSelected() {
      if (lastSelection == null) 
        return "Table";
      if (lastSelection.tagName == "TD") 
        return "Cell";
      if (lastSelection.tagName == "TR")
        return "Row";
    }</SCRIPT>
      

  4.   

    <table id=t1 border=1 width=200>
    <tr>
    <td>aa</td>
    <td>bb</td>
    <td>cc</td>
    </tr>
    </table>
    <button onclick=add()>add</button>
    <script>
    function add(){
        newRow=t1.insertRow()
        newCell=newRow.insertCell()
        newCell.innerHTML="aa"
        newCell=newRow.insertCell()
        newCell.innerHTML="bb"
        newCell=newRow.insertCell()
        newCell.innerHTML="cc"
    }
    </script>
      

  5.   

    楼上各位大哥，我怎么新增成功后，一刷新，新增的表格就消失？？查看页面源码，新增并没有生成<td>**</td>之类的代码，所以导致刷新后消失，有没有方法生成，刷新不会消失？？好象用innerHTML可以实现，但不知道具体怎么做，望指教！！！
      

  6.   

    多谢楼上的诸位兄弟，上面的问题解决了（采用IFRAME不让它刷新就提交，然后采用楼上兄弟方法产生行）。
       现在还有一点问题：用户需要在新增加的一行的某列中要随着新增行一起产生一个按钮，这又如何实现啊？？