CSDN首页 空间 新闻 论坛 Blog 下载 读书 网摘 搜索 .NET Java 视频 接项目 求职 在线学习 买书 程序员 通知
不看会后悔的Windows XP之经验谈 简单快捷DIY实用家庭影院
CSDN社区
搜索 收藏 打印 关闭
CSDN社区 >  Web 开发 >  JavaScript

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

楼主yyttrr66666（）2006-03-20 13:23:13 在 Web 开发 / JavaScript 提问

一个table，能不能动态地增加行，删除行？  
  <table>  
  <tr><td></td></tr>  
  </table> 问题点数：100、回复次数：40Top

1 楼meizz（梅花雪）回复于 2006-03-20 13:28:35 得分 0

insertRow()  
  insertCell()  
  deleteRow()Top

2 楼KimSoft（革命的小酒天天醉-http://blog.csdn.net/kimsoft/）回复于 2006-03-20 13:31:37 得分 0

动态表格生成器  
   
  <HTML>  
  <HEAD>  
  <META   NAME="GENERATOR"   Content="Microsoft   Visual   Studio   6.0">  
  <TITLE></TITLE>  
  <SCRIPT   ID=clientEventHandlersJS   LANGUAGE=JScript>  
  <!--  
   
  function   document_oncontextmenu()   {  
  window.event.returnValue   =   false;  
  return   false;  
  }  
   
  //-->  
  </SCRIPT>  
  <SCRIPT   LANGUAGE=JScript   FOR=document   EVENT=oncontextmenu>  
  <!--  
    document_oncontextmenu()  
  //-->  
  </SCRIPT>  
  </HEAD>  
  <LINK   href="style.css"   rel=stylesheet   type=text/css>  
  <SCRIPT   LANGUAGE=JScript>  
  <!--  
  var   NowW   =   3;  
  var   NowH   =   3;  
   
  function   MakeSerial(w,h)  
  {  
  return   ""   +   w   +   "_"   +   h;  
  }  
  function   MakeInputTable(MaxW,MaxH)  
  {  
  var   Html   =   "<Table   cellSpacing=1   cellPadding=1   border=0>";  
  for(var   h   =0;h<MaxH;h++)  
  {  
  Html   +=   "<TR>";  
  for(var   w   =   0;w<MaxW;w++)  
  {  
  Html   +=   "<TD>";  
  Html   +=   "<INPUT   type=\"text\"   id=INPUT"+MakeSerial(w,h)+"   name=INPUT"+MakeSerial(w,h)+"   Size   =   8   maxLength=32>";  
  Html   +=   "</TD>";  
  }  
  Html   +=   "</TR>";  
  }  
  Html   +=   "</Table>";  
  return   Html;  
  }  
  function   MakeTable(MaxW,MaxH)  
  {  
  var   Html   =   "<Table   cellSpacing=0   cellPadding=1   border=1     borderColorDark=#FFFFFF   borderColorLight=#000000   width=100%   style=\"FONT-SIZE:   medium;   CURSOR:   default;   COLOR:   aliceblue;   BACKGROUND-COLOR:   #556677\">";  
  for(var   h   =0;h<MaxH;h++)  
  {  
  Html   +=   "<TR>";  
  for(var   w   =   0;w<MaxW;w++)  
  {  
  Html   +=   "<TD>";  
  var   Value   =   window.document.body.all("INPUT"   +   MakeSerial(w,h)).value;  
  if   (Value=="")  
  Value   =   "&nbsp;";  
  Html   +=   Value;  
  Html   +=   "</TD>";  
  }  
  Html   +=   "</TR>";  
  }  
  Html   +=   "</Table>";  
  return   Html;  
  }  
  function   AddW(Size)  
  {  
  NowW   +=   Size;  
  if   (NowW>12)  
  NowW   =   12;  
  if   (NowW<1)  
  NowW   =   1;  
  INPUT.innerHTML   =   MakeInputTable(NowW,NowH);  
  }  
  function   AddH(Size)  
  {  
  NowH   +=   Size;  
  if   (NowH>12)  
  NowH   =   12;  
  if   (NowH<1)  
  NowH   =   1;  
  INPUT.innerHTML   =   MakeInputTable(NowW,NowH);  
  }  
  function   Ok()  
  {  
  BASE.innerHTML   =   MakeTable(NowW,NowH);  
  }  
  //-->  
  </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>&nbsp;</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>  
  <!--  
  INPUT.innerHTML   =   MakeInputTable(NowW,NowH);  
  //-->  
  </SCRIPT>  
  </HTML>  
  Top

3 楼KimSoft（革命的小酒天天醉-http://blog.csdn.net/kimsoft/）回复于 2006-03-20 13:32:11 得分 0

可以说，方法非常之多。Top

4 楼hbhbhbhbhb1021（天外水火(我要多努力)）回复于 2006-03-20 13:34:04 得分 0

我这也有一个现成的，你看下，改下吧  
  <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>Top

5 楼clare2003（忘情火）回复于 2006-03-20 13:34:43 得分 0

//动态生成表格  
  <HTML>  
  <HEAD>  
  <META   NAME="GENERATOR"   Content="Microsoft   Visual   Studio   6.0">  
  <TITLE></TITLE>  
  <SCRIPT   ID=clientEventHandlersJS   LANGUAGE=JScript>  
  <!--  
   
  function   document_oncontextmenu()   {  
  window.event.returnValue   =   false;  
  return   false;  
  }  
   
  //-->  
  </SCRIPT>  
  <SCRIPT   LANGUAGE=JScript   FOR=document   EVENT=oncontextmenu>  
  <!--  
    document_oncontextmenu()  
  //-->  
  </SCRIPT>  
  </HEAD>  
  <LINK   href="style.css"   rel=stylesheet   type=text/css>  
  <SCRIPT   LANGUAGE=JScript>  
  <!--  
  var   NowW   =   3;  
  var   NowH   =   3;  
   
  function   MakeSerial(w,h)  
  {  
  return   ""   +   w   +   "_"   +   h;  
  }  
  function   MakeInputTable(MaxW,MaxH)  
  {  
  var   Html   =   "<Table   cellSpacing=1   cellPadding=1   border=0>";  
  for(var   h   =0;h<MaxH;h++)  
  {  
  Html   +=   "<TR>";  
  for(var   w   =   0;w<MaxW;w++)  
  {  
  Html   +=   "<TD>";  
  Html   +=   "<INPUT   type=\"text\"   id=INPUT"+MakeSerial(w,h)+"   name=INPUT"+MakeSerial(w,h)+"   Size   =   8   maxLength=32>";  
  Html   +=   "</TD>";  
  }  
  Html   +=   "</TR>";  
  }  
  Html   +=   "</Table>";  
  return   Html;  
  }  
  function   MakeTable(MaxW,MaxH)  
  {  
  var   Html   =   "<Table   cellSpacing=0   cellPadding=1   border=1     borderColorDark=#FFFFFF   borderColorLight=#000000   width=100%   style=\"FONT-SIZE:   medium;   CURSOR:   default;   COLOR:   aliceblue;   BACKGROUND-COLOR:   #556677\">";  
  for(var   h   =0;h<MaxH;h++)  
  {  
  Html   +=   "<TR>";  
  for(var   w   =   0;w<MaxW;w++)  
  {  
  Html   +=   "<TD>";  
  var   Value   =   window.document.body.all("INPUT"   +   MakeSerial(w,h)).value;  
  if   (Value=="")  
  Value   =   "&nbsp;";  
  Html   +=   Value;  
  Html   +=   "</TD>";  
  }  
  Html   +=   "</TR>";  
  }  
  Html   +=   "</Table>";  
  return   Html;  
  }  
  function   AddW(Size)  
  {  
  NowW   +=   Size;  
  if   (NowW>12)  
  NowW   =   12;  
  if   (NowW<1)  
  NowW   =   1;  
  INPUT.innerHTML   =   MakeInputTable(NowW,NowH);  
  }  
  function   AddH(Size)  
  {  
  NowH   +=   Size;  
  if   (NowH>12)  
  NowH   =   12;  
  if   (NowH<1)  
  NowH   =   1;  
  INPUT.innerHTML   =   MakeInputTable(NowW,NowH);  
  }  
  function   Ok()  
  {  
  BASE.innerHTML   =   MakeTable(NowW,NowH);  
  }  
  //-->  
  </SCRIPT>  
  <BODY>  
  <TABLE   cellSpacing=1   cellPadding=1   width="100%"   border=0   Height="100%">  
      <TR   Height="1%">  
          <TD></TD>  
          <TD   align=middle><FONT   face=&ordm;&Uacute;&Igrave;&aring;    
              size=5><STRONG>&para;&macr;&Igrave;&not;±í&cedil;&ntilde;&Eacute;ú&sup3;&Eacute;&AElig;÷</STRONG></FONT></TD>  
          <TD></TD>  
          </TR></TR>  
      <TR   Height="50%">  
          <TD></TD>  
          <TD   align=middle><DIV   ID=BASE>&nbsp;</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="&Ocirc;&ouml;&frac14;&Oacute;&ETH;&ETH;"   OnClick="AddH(1)"><INPUT   type="button"   value="&frac14;&otilde;&Eacute;&Ugrave;&ETH;&ETH;"   OnClick="AddH(-1)">   <INPUT   type="button"   value="                 &Igrave;á&frac12;&raquo;                 "   OnClick="Ok()">   <INPUT   type="button"   value="&Ocirc;&ouml;&frac14;&Oacute;&Aacute;&ETH;"   OnClick="AddW(1)"><INPUT   type="button"   value="&frac14;&otilde;&Eacute;&Ugrave;&Aacute;&ETH;"   OnClick="AddW(-1)"></TD>  
          <TD></TD>  
          </TR></TR>  
  </TABLE>  
  </BODY>  
  <SCRIPT   LANGUAGE=JScript>  
  <!--  
  INPUT.innerHTML   =   MakeInputTable(NowW,NowH);  
  //-->  
  </SCRIPT>  
  </HTML>  
  Top

6 楼pool2008（）回复于 2006-03-20 13:44:07 得分 0

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

7 楼yyttrr66666（）回复于 2006-03-20 14:03:46 得分 0

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

8 楼clare2003（忘情火）回复于 2006-03-20 14:10:40 得分 0

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

9 楼yyttrr66666（）回复于 2006-03-20 14:32:14 得分 0

能给个快速，简洁的完整的例子吗Top

10 楼yyttrr66666（）回复于 2006-03-20 14:32:50 得分 0

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

11 楼clare2003（忘情火）回复于 2006-03-20 14:42:04 得分 0

你那个表是固定的还是  
  程序动态生成的??  
  将你的表格涉及的代码粘贴出来吧!!  
  Top

12 楼yyttrr66666（）回复于 2006-03-20 14:51:01 得分 0

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

13 楼yyttrr66666（）回复于 2006-03-20 14:56:12 得分 0

我只要能在指定位置添加，删除行就可以了，刚才找了一些例子，看不懂  
  Top

14 楼ice241018（力挽狂澜）回复于 2006-03-20 14:58:27 得分 0

学习  
  Top

15 楼DeluxWorld（曾经的你）回复于 2006-03-20 15:06:49 得分 0

简单的例子，新增数据是静态的  
  <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>Top

16 楼DeluxWorld（曾经的你）回复于 2006-03-20 15:09:12 得分 0

在文本框内输入想要删除或新增行的序号就可以大概的实现你的功能了~Top

17 楼yyttrr66666（）回复于 2006-03-20 15:14:12 得分 0

谢谢曾经的你  
  还有可否一次性地删除所有地行？  
  Top

18 楼LCKKING（黑旋风）回复于 2006-03-20 15:14:34 得分 0

仿照楼上几位大师写吧~~不难的Top

19 楼DeluxWorld（曾经的你）回复于 2006-03-20 15:20:59 得分 0

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

20 楼yyttrr66666（）回复于 2006-03-20 15:43:07 得分 0

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

21 楼DeluxWorld（曾经的你）回复于 2006-03-20 15:52:17 得分 0

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

22 楼DeluxWorld（曾经的你）回复于 2006-03-20 16:00:44 得分 0

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

23 楼yyttrr66666（）回复于 2006-03-20 16:07:03 得分 0

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

24 楼yyttrr66666（）回复于 2006-03-20 17:03:33 得分 0

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

25 楼mingxuan3000（铭轩）回复于 2006-03-20 17:37:48 得分 0

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

26 楼petiteturbo（皮皮陶）回复于 2006-03-21 07:36:01 得分 0

mark  
  Top

27 楼wy2000490（军）回复于 2006-03-21 08:49:44 得分 0

我这里有个动态添加的，你看看  
  稍微修改加一个删除就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">&nbsp;</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>&nbsp;</p>  
      <p>&nbsp;</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">&nbsp;</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>  
  Top

28 楼joneyonly（）回复于 2006-03-21 11:21:28 得分 0

markTop

29 楼andycpp（幻瞳）回复于 2006-03-21 11:32:27 得分 0

markTop

30 楼marco08（天道酬勤）回复于 2006-03-21 12:24:44 得分 0

学习Top

31 楼strawren（大漠）回复于 2006-03-21 19:32:59 得分 0

学习  
  学习Top

32 楼Chulangzi（楚浪子－我要变强！）回复于 2006-03-21 20:23:10 得分 0

好东西，学习Top

33 楼Scarroot（每天一贴,把分用完.）回复于 2006-03-21 20:47:40 得分 0

markTop

34 楼livesylvia（问君何所之）回复于 2006-03-21 21:07:52 得分 0

以上用法只能够在IE下运行吧~！Top

35 楼xxrl（孔曰成仁,孟曰取媳妇-->她太有才了）回复于 2006-03-21 21:15:43 得分 0

怎么用到了这么复杂的咚咚？是不是可以考虑采用其他方面的设计？Top

36 楼superdullwolf（超级大笨狼,每天要自强,MVP）回复于 2006-03-21 23:16:00 得分 0

 
  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        
   
  其他，比如下拉列表对象，和拖拽操作等我有时间也整理比较一下，实现相同功能，相对比较短的精彩代码是值得收藏的。  
  Top

37 楼mingxuan3000（铭轩）回复于 2006-03-21 23:18:51 得分 0

期待拖拽操作的Top

38 楼sunangel（我想我是海）回复于 2006-07-05 20:33:48 得分 0

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

39 楼wolftomb（你放弃了生活，生活也就放弃了你!）回复于 2006-07-06 11:08:41 得分 0

markTop

40 楼cnham（好好工作每一天）回复于 2006-07-06 15:51:48 得分 0

markTop

相关问题

  • 如何在TABLE中动态增加或删除行?
  • VsflexGrid如何动态增加、删除行
  • datagrid动态增加、删除列
  • javascript动态增加、删除表格行
  • 怎么样才能动态在TABLE中的一定位置增加或删除行或列
  • 如何动态增加、删除、修改、隐藏字段名？
  • 如何在WEBFORM中动态增加或删除TREEVIEW中的NODE
  • JavaScript 实现动态增加、删除表单域 代码分析??????????????????
  • 怎么动态增加删除表单框?
  • 怎么动态删除或增加数据窗口列

关键词

得分解答快速导航

  • 帖主：yyttrr66666

相关链接

  • Web开发类图书

广告也精彩

反馈

请通过下述方式给我们反馈
反馈
提问
网站简介|广告服务|VIP资费标准|银行汇款帐号|网站地图|帮助|联系方式|诚聘英才|English|问题报告
北京创新乐知广告有限公司 版权所有, 京 ICP 证 070598 号
世纪乐知(北京)网络技术有限公司 提供技术支持
Copyright © 2000-2008, CSDN.NET, All Rights Reserved
GongshangLogo