一个table，能不能动态地增加行，删除行？

动态表格生成器<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=JScript>

</SCRIPT>
<SCRIPT LANGUAGE=JScript FOR=document EVENT=oncontextmenu>

</SCRIPT>
</HEAD>
<LINK href="style.css" rel=stylesheet type=text/css>
<SCRIPT LANGUAGE=JScript>

</SCRIPT>
<BODY>
<TABLE cellSpacing=1 cellPadding=1 width="100%" border=0 Height="100%">
  <TR Height="1%">
    <TD></TD>
    <TD align=middle><FONT face=黑体
      size=5><STRONG>动态表格生成器</STRONG></FONT></TD>
    <TD></TD>
    </TR></TR>
  <TR Height="50%">
    <TD></TD>
    <TD align=middle><DIV ID=BASE> </DIV></TD>
    <TD></TD></TR>
  <TR Height="49%">
    <TD></TD>
    <TD align=middle><DIV ID=INPUT></DIV></TD>
    <TD></TD></TR>
  <TR Height="1%">
    <TD></TD>
    <TD align=middle><INPUT type="button" value="增加行" OnClick="AddH(1)"><INPUT type="button" value="减少行" OnClick="AddH(-1)"> <INPUT type="button" value="        提交        " OnClick="Ok()"> <INPUT type="button" value="增加列" OnClick="AddW(1)"><INPUT type="button" value="减少列" OnClick="AddW(-1)"></TD>
    <TD></TD>
    </TR></TR>
</TABLE>
</BODY>
<SCRIPT LANGUAGE=JScript>

</SCRIPT>
</HTML>

我这也有一个现成的，你看下，改下吧
<form name="form1" method="post" action="">
  <input type="button" name="Submit" value="-"  onclick="deleteRow()">
  <input name="num" type="text" value="3" size="4" maxlength="4">
  <input type="button" name="Submit2" value="+" onclick="insertRow()">
  <br>
  <table id="table1" width="500" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="87"><select name="select"></select></td>
      <td width="277"><input type="text" name="textfield1"></td>
      <td width="136"><input type="button" name="1" value="1"></td>
    </tr>
    <tr>
      <td><select name="select2"></select></td>
      <td><input type="text" name="textfield2"></td>
      <td><input type="button" name="2" value="2"></td>
    </tr>
    <tr>
      <td><select name="select3"></select></td>
      <td><input type="text" name="textfield3"></td>
      <td><input type="button" name="3" value="3"></td>
    </tr>
  </table>
</form>
<script language=javascript>
function deleteRow()
{
var obj=document.getElementById("table1")
var rowIndex=obj.childNodes[0].childNodes.length;
if(rowIndex>3)
{
document.getElementById("num").value=document.getElementById("num").value-parseInt(1)
obj.deleteRow(rowIndex-parseInt(1));
}
}
function insertRow()
{
var obj=document.getElementById("table1")
var rowIndex=obj.childNodes[0].childNodes.length;
var objTR=obj.insertRow(rowIndex);
var objTD1=objTR.insertCell();
var objTD2=objTR.insertCell();
var objTD3=objTR.insertCell();
rowIndex2=parseInt(rowIndex)+parseInt(1)
objTD1.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[0].innerHTML.replace(/(name=)(\")*(select)(\d)(\2)/gi,"$1$2$3"+rowIndex2+"$5")
objTD2.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[1].innerHTML.replace(/(name=)(\")*(textfield)(\d)(\2)/gi,"$1$2$3"+rowIndex2+"$5")
objTD3.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[2].innerHTML.replace(/(=)(\")*(\d)(\2)/gi,"$1$2"+rowIndex2+"$4")
document.getElementById("num").value=parseInt(document.getElementById("num").value)+parseInt(1)
}
</script>

//动态生成表格
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=JScript>

</SCRIPT>
<SCRIPT LANGUAGE=JScript FOR=document EVENT=oncontextmenu>

</SCRIPT>
</HEAD>
<LINK href="style.css" rel=stylesheet type=text/css>
<SCRIPT LANGUAGE=JScript>

</SCRIPT>
<BODY>
<TABLE cellSpacing=1 cellPadding=1 width="100%" border=0 Height="100%">
  <TR Height="1%">
    <TD></TD>
    <TD align=middle><FONT face=ºÚÌå
      size=5><STRONG>¶¯Ì¬±í¸ñÉú³ÉÆ÷</STRONG></FONT></TD>
    <TD></TD>
    </TR></TR>
  <TR Height="50%">
    <TD></TD>
    <TD align=middle><DIV ID=BASE> </DIV></TD>
    <TD></TD></TR>
  <TR Height="49%">
    <TD></TD>
    <TD align=middle><DIV ID=INPUT></DIV></TD>
    <TD></TD></TR>
  <TR Height="1%">
    <TD></TD>
    <TD align=middle><INPUT type="button" value="Ôö¼ÓÐÐ" OnClick="AddH(1)"><INPUT type="button" value="¼õÉÙÐÐ" OnClick="AddH(-1)"> <INPUT type="button" value="        Ìá½»        " OnClick="Ok()"> <INPUT type="button" value="Ôö¼ÓÁÐ" OnClick="AddW(1)"><INPUT type="button" value="¼õÉÙÁÐ" OnClick="AddW(-1)"></TD>
    <TD></TD>
    </TR></TR>
</TABLE>
</BODY>
<SCRIPT LANGUAGE=JScript>

</SCRIPT>
</HTML>

谢谢，这么长的代码
我希望简洁一点的，但是速度要快，因为的table可能有几万行，甚至更多

我希望能在table特定的行增加新好，以及删除特定的行
比如
现在有5行，我希望在第2行和第3行之间增加一行，这样有6行了
然后删除第4行
并且要立刻生效显示，但是不能重新执行页面其它的代码，比如JSP的从数据库select的代码
只执行添加table行和删除TR的代码，同时显示TABLE的变化

增加
oTR = object.insertRow( [iIndex])
删除
object.deleteRow( [iRowIndex])
index为rows collection的索引

我javascript基础很差，才开始学
谢谢了

我不会，我的表格是动态的
希望能在指定的位置insertrow，在指定的位置deleterow
没有代码

简单的例子，新增数据是静态的
<table id ='test' border='1'>
  <tr><td>111</td><td>111</td></tr>
  <tr><td>222</td><td>222</td></tr>
  <tr><td>333</td><td>333</td></tr>
</table>
<input type='text' id='row_num'>
<input type='button' onclick=add(parseInt(document.getElementById("row_num").value)-1) value='add'><input type='button' onclick=del(parseInt(document.getElementById("row_num").value)-1) value='del'>
<script>
   var row_num;
   var table = document.getElementById('test');

   function add(index){
     newRow = table.insertRow(index);
       cell1 = newRow.insertCell();
       cell1.innerText = '555';
       cell2 = newRow.insertCell();
       cell2.innerText ='555';
     row_num = table.rows.length;
   }
   function del(index){
     table.deleteRow(index);
row_num = table.rows.length;
   }
</script>

对所有的行作一个遍历：
for(i=0;i<table.rows.length;i++){
table.deleteRow(i);
}

那不是很慢吗？
能否一次性地删除这个table
还有，我发现，我想insert 10000行是，就很慢了，需要30秒
我有几万行地

可以这样：
document.getElementById(tableName).style.display = 'none';

也可以这样：
var table1 = document.getElementById(tablename);
table1.parentNode.removeChild(table1);

那我可不可以removeChild下指定比如5行？3行？

我想在<TD></TD>之间添加内容好像不行
比如
<TD>SADFADS</TD>

<TD></TD>之间添加内容tableid.rows[0].cells[0].innerText="asdfa";

我这里有个动态添加的，你看看
稍微修改加一个删除就OK了<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>自发信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2719.2200" name=GENERATOR>
<link rel="stylesheet" href="../css/common.css" type="text/css">
</head>
<script>
function addNewQuestion()
{
if(form1.Question1.value.length != 11)
{
alert("您只有正确输入11位号码,才可以增加下一个");return false;
}
//document.write(form1.Question1.value);
//document.write(form1.Question1.value.length);
document.form1.newTable.value =  parseInt(document.form1.newTable.value) + 1;
var newItemId;
if( document.form1.newTable.value > 20 )
{
alert("接收号码总数不能超过 20 个。");return false;
//window.location.reload();
}
newItemId = document.form1.newTable.value;
var objItem = '<table cellspacing="0" cellpadding="4" width="340" border="0" class="tableborder">';
objItem += '<tr>';
objItem += '<td width="10"> </td>'
objItem += '<td width="150">';
objItem += '<div align="left"><input size="20" maxlength=11 name="Question' + newItemId + '" class="tableborder"></div>';
objItem += '</td>';
objItem += '<td>';
objItem += '<div align="left"><b>号码 ' + newItemId + ':</b> </div>';
objItem += '</td>';
objItem += '</tr>';
objItem += '</table>';
document.all.__idInsertBefore.insertAdjacentHTML("beforeBegin", objItem);
} function showTips(obj)
{
obj.title=obj.value;
} function addNewChild(obj)
{
var isblank = "false";
var objName = obj.name;
var last2Char = objName.substring(objName.length - 2);
if( last2Char.substring(0, 1) > '9' || last2Char.substring(0, 1) < '0' )
{
last2Char = last2Char.substring(1, 2);
} for(var i=0; i < document.form1.elements[objName].length; i++)
{
if(document.form1.elements[objName].item(i).value == "")
isblank = "yes"
}
if( isblank != "yes" )
{
var objItem = '<div id="__idQueOption' + last2Char + '"><b>问题选项：</b>';
    objItem += '  <input onpropertychange="addNewChild(this)" size="60" name="' + objName + '" class="tableborder" />';
    objItem += '</div>';
objName = "__idQueOption" + last2Char;
var varQueOption = document.all[objName];
if( varQueOption.length != null )
   varQueOption = varQueOption.item(varQueOption.length-1);varQueOption.insertAdjacentHTML("afterEnd",objItem);
}
}
</script>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center">
  <p> </p>
  <p> </p>
  <p>

  </p>
  <form id=form1 name=form1 method="post" action="send.php" onsubmit="return form_check_empty(this);">
    <table width="537" border="6" height="94" bgcolor="#DDEEBB" cellpadding="0" cellspacing="6" bordercolor="#FF0000">
      <tr>
        <td width="452" height="109">
          <div align="center"> 发送给朋友</div>
        </td>
        <td width="386" height="109"> 　
          <table class=tableborder cellspacing=0 cellpadding=4 width="340"
border=0>
            <tbody>
            <tr>
              <td width="10"> </td>
              <td width="150">
                <div align="left">
                  <input class=tableborder maxlength=11 size=20 name=Question1 onKeyUp="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
                </div>
              </td>
              <td>
                <div align="left"> <b>号码 1</b></div>
              </td>
            </tr>
            </tbody>
          </table>
          <table cellspacing=0 cellpadding=0 width="99%" align=center border=0>
            <tbody>
            <tr>
              <td>
                <div id=__idInsertBefore></div>
                <input type=hidden value=1 name=newTable>
                <br>
                <div
      style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px"
      align=right>
                  <input class=CustButton onClick=addNewQuestion() type=button value=增加一个新号码 name="button" style="border-top:1px solid #FFFFFF;border-left:1px solid  #FFFFFF;border-right:1px solid #FFFFFF;border-bottom:1px solid #ffffff;">
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td colspan="2" height="43">
          <div align="center">
            <input name="send" type="submit" value="发  送" style="width:50px;height:18px;border-top:1px solid #FFFFFF;border-left:1px solid  #FFFFFF;border-right:1px solid #FFFFFF;border-bottom:1px solid #ffffff;">
            <input name="resent" type="reset" value="清  空" style="width:50px;height:18px;border-top:1px solid #FFFFFF;border-left:1px solid  #FFFFFF;border-right:1px solid #FFFFFF;border-bottom:1px solid #ffffff;">
          </div>
        </td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>

1，动态删除Table 里面内容技巧，不需要写太多代码，一行：
tb.removeNode(true)2,动态增加行,除了CreateElement方法，还可以这样比较短小：<table id=tb1></table>
<SCRIPT>
function addTable(){
   var row1 = tb1.insertRow();
   var cell1=row1.insertCell();
   var cell2=row1.insertCell();
   cell1.innerText="灰豆宝宝";
   cell2.innerText="超级大笨狼"
}
</SCRIPT>
<INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()">3，在DIV中动态增加Table<SCRIPT>
function addTable(){
   var tb1 = document.createElement("table");
   tb1.border="1px";
   var row1 = tb1.insertRow();
   var cell1=row1.insertCell();
   var cell2=row1.insertCell();
   mydiv.appendChild(tb1);
   cell1.innerText="wanghr100";
   cell2.innerText="panyuguang962"
}
</SCRIPT>
<BODY>
<div id=mydiv style="width:400;height:300;"></div>
<INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()">4,在DIV中删除Table，简单只要Div.innerHTML=""就可以。以上是部分实用相对短小的代码，当然有其他各种办法实现，不过一般都比上面的长，比如组合使用DIV对象的insertAdjacentHTML 方法等，在不同需要下使用不同方法，前提是研究好浏览器模型的各种对象的方法属性。尤其是熟悉CSS+HTML就会做的很酷。就JS语言本身来说要求不高。以下是以Document对象为例，相关方法有：Method Description
attachEvent
createAttribute
createComment
createDocumentFragment
createElement
createEventObject
createStyleSheet
createTextNode
detachEvent
getElementById
getElementsByName
getElementsByTagName
mergeAttributes
recalc
write
writeln
以DIV对象为例相关方法有：
addBehavior
appendChild
applyElement
attachEvent
clearAttributes
cloneNode
contains
detachEvent
getAdjacentText
getAttribute
getAttributeNode
getElementsByTagName
hasChildNodes
insertAdjacentElement
insertAdjacentHTML
insertAdjacentText
insertBefore
mergeAttributes
normalize
removeAttribute
removeAttributeNode
removeBehavior
removeChild
removeExpression
removeNode
replaceAdjacentText
replaceChild
replaceNode
setActive
setAttribute
setAttributeNode
setExpression   其他，比如下拉列表对象，和拖拽操作等我有时间也整理比较一下，实现相同功能，相对比较短的精彩代码是值得收藏的。

我做了一个，我如何在服务器端获取这些动态新增加的行呢？
我是用datagrid，增加是实现了，就是在服务器端再去看的时候显示没有新增加一条记录，这个问题怎么处理呢？
http://community.csdn.net/Expert/topic/4862/4862782.xml?temp=.8985559

调试易

一个table，能不能动态地增加行，删除行？

解决方案 »