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

时间：2021-03-20 16:13:30
请教：想实现，当用户点击“新增”按钮时，在下面的表格中自动新增一行（有三列）。
    多谢！

8 个解决方案

#1

<!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>

#2

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

#3

<!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>

#4

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>

#5

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

#6

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

#7

想要刷新后还在？提交吧

#8

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

#1

<!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>

#2

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

#3

<!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>

#4

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>

#5

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

#6

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

#7

想要刷新后还在？提交吧

#8

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

相关文章