2008-01-11

js动态增加删除table行列

 

关于js动态操作table增加删除的代码：

<html>   
  <head>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
  <meta   name="GENERATOR"   content="Microsoft   FrontPage   4.0">   
  <meta   name="ProgId"   content="FrontPage.Editor.Document">   
  <title>try</title>   
  </head>   
  <body>   
  <script>   
  allTrafficCount=1   
  allCount=1   
  function   addTrafficeRow()   //增加一行   
  {   
          newRow=trafficeList.insertRow(trafficeList.rows.length);   
          newRow.id="tradt";   
          newRow.ln=allTrafficCount;   
            
          c1=newRow.insertCell(0);   
          c1.id="tradtRow";   
          c1.ln=allCount;   
          c1.innerHTML="<input   type=text   name='traffic'   size=40   maxlength=200>  <input   type=button   value='删除'   ln="   +   allTrafficCount   +   "   onclick='javascript:delTrafficeRow();'>"   
    
          allTrafficCount++;   //总计多少行   
          frm.trafficCount.value   =   allTrafficCount;   
    
  }   
    
  function   delTrafficeRow()   //删除一行   
  {   
          line   =   parseInt(event.srcElement.ln,10);   
    
          if   (line>0)   
                  for   (i=1;i<trafficeList.rows.length;i++)   
    
        if   (trafficeList.rows[i].ln==line)   //问题出在这儿   
                          {   
                                  trafficeList.deleteRow(i);   
                allTrafficCount--;   
                frm.trafficCount.value   =     allTrafficCount;   
                          }   
  }   
  </script>   
  <form   name=frm>   
  <table   border="1"   id=trafficeList>   
  <tr><td   width=100>try,try</td></tr>   
  </table>   
  <input   type=button   value=add     onclick="addTrafficeRow()"><input   name=trafficCount>   
  </form>   
  </body>   
  </html>

 增加的代码：

 

newRow = document.all.tableId.insertRow(document.all.tableId.rows.length);
newCell = newRow.insertCell();
newCell.insertAdjacentHTML('BeforeEnd','增加的内容');

其中insertRow()中的参数为其增加的位置index

删除的代码：

tableId.deleteRow();

其中deleteRow()的参数为其删除的位置index，如果没有参数，从最末端开始删除

至于insertAdjacentHTML(),有空在说吧

评论
发表评论

您还没有登录，请登录后发表评论

hydex
搜索本博客
我的相册
5e0be7a5-3ea9-31fe-a7c4-7a19f3b7d537-thumb
自行车
共 1 张
存档
最新评论