工作中遇到的问题及解决办法12

07年6月29日

  来说说javascript怎么样动态的添加删除表格吧,今天遇到这样的问题,有了比较经典高效的方法,做个整理,以后就这么解决了!

<table width="100%" border="0" cellspacing="0" cellpadding="0">
           <tr>
             <td height="25" bgcolor="#f7f7f7">
             <table id="t1" width="100%" height="25" border="0" cellpadding="0" cellspacing="0" class="font_14">
                 <tr>
                   <td width="30">&nbsp;</td>
                   <td width="130">文件地点：</td>
                   <td>
                   <input type="text" name="address" style="width:40% "/>
                    保管人:
                    <input type="text" name="vindicator" id="vindicator" size="10"/>&nbsp;&nbsp;
                    <input type="hidden" name="vuserId" id="vuserId"/>
                    <input type="button" name="button" value=" 选择 " onclick="return showModalDpReturn('<%=request.getContextPath()%>/infpm/userMiddle.jsp?check=one','600','600',vindicator,vuserId);" class="input"/>
                    <input type="button" name="buttonadd" value="增加物理分发" class="input" onclick="addvindicator()" />
                    <input type="button" name="buttonadd" value="删除物理分发" class="input" onclick="deleteAccept()" />
                   </td>
                 </tr>
             </table></td>
           </tr>
           <tr>
             <td height="1" bgcolor="#b5b5b5"></td>
           </tr>
         </table>

这是html的页面代码,当我点击="增加物理分发",会自动的加上一行,这个在javascript里的实现

<script language="javascript">
     
   var total = 0;  //total是点击次数的计数
   // 添加文件地址方法
   function addvindicator(){
                //alert(total);   
       var index = t1.rows.length;  //t1是上面table的id    得到t1这个table的总行数,变量index表示
       //alert(index);
       var oRow1=t1.insertRow(index);  //insertRow(index)指每点一次table加一行
       
        var aRows=t1.rows;      //得到加完行以后此table的总行数,变量aRows表示
        var aCells1=oRow1.cells;  //为刚添加的这行创建列
                
    var oCell1_1=aRows(oRow1.rowIndex).insertCell(aCells1.length); //aRows(oRow1.rowIndex)这行好好说

    //oRow1.rowIndex只上面添加的oRow1这行的下标,根据这个下标再aRows(oRow1.rowIndex)中可以得到总行数

   的位置,insertCell是javascript中添加列的方法,aCells1.length指为上面刚添加的这行加列的length属性,这句话总结起来说就是:在添加的名为oRow1的行上加创建的aCells1_1这个列,并把aCells1.length列长这个属性放在创建的aCells1_1这个列上,,以下如此类推.
    //oCell1_1.setAttribute("align","center"); //把属性放在里面
    var oCell1_2=aRows(oRow1.rowIndex).insertCell(aCells1.length); //
                //oCell1_2.setAttribute("align","center");
                var oCell1_3=aRows(oRow1.rowIndex).insertCell(aCells1.length);
                //oCell1_3.setAttribute("align","center");
               
                var address = "address" + total;
                var userId = "userId" + total;
                var vindicator = "vindicator"+total;
                var  userName ="userName"+total;
    total += 1;
    //alert(total)
    oCell1_1.innerHTML='';
    oCell1_2.innerHTML='文件地点:';
    oCell1_3.innerHTML='<input type="text" size="30" id="' + address + '" name="address" maxlenth="300" class="ddinput">'
                                 + '<input type="hidden" id="' + userId + '" name="userId">'+'&nbsp;'+'保管人:'
                     +'<input type="text" name="vindicator" id="'+vindicator+'" size="10">'
         + '<input type="button" name="button1" value=" 选择 " size="20" class="input" onclick="return showModalDpReturn(/'<%=request.getContextPath()%>/infpm/userMiddle.jsp?check=one/',/'600/',/'600/',' + vindicator + ',' + userId + ')"/>';
        
     
   }
    
     //删除收件人
   function deleteAccept(){
       var index = t1.rows.length;
       if(index>1){     
        t1.deleteRow(index-1);
        //t1.deleteRow(index-2);
        //t1.deleteRow(index-3);
        total = total - 1;
       }
       //alert(total);
   }
</script>

当"删除物理分发" 的时候,那么增加的最后一行将会移去.