JS动态添加表格行内容的时候如何将<form>写进去？

试试这种方法
<HTML>
<HEAD>
<title>..</title>
<script language="javascript" type="text/javascript">
<!--
//用于控制变更软件的增加与删除
    var ListSum=1;
    function dgAdd()
    {
        var temp = document.all.table1;
        temp.insertRow(temp.rows.length);
        temp.rows[temp.rows.length -1].insertCell(0);
        var sHTML;
        sHTML=ListItem.innerHTML;
        sHTML=Replace(sHTML,"ListTb0","ListTb"+ListSum);        sHTML=Replace(sHTML,"strDevGIP0","strDevGIP"+ListSum);
        sHTML=Replace(sHTML,"strDevIP10","strDevIP1"+ListSum);
        ListSum++;
        temp.rows[temp.rows.length-1].cells[0].innerHTML=sHTML;
        document.all.num.value = (ListSum-1);
    }
    function Replace(Sstring,Cstring,Dstring)
    {
        var blength=Cstring.length;
        var firstbyte=Sstring.indexOf(Cstring,0);
        for (var i=0;i<=Sstring.length-blength;i++)
        {
            tstring=Sstring.substring(i,i+blength);
            if (tstring==Cstring)
            {
                Sstring=Sstring.substring(0,i)+Dstring+Sstring.substring(i+blength,Sstring.length);
            }
        }
        return Sstring;
    }
//-->
</script>
</HEAD>
<body>
  <form name="Form1" method="post" action="" id="Form1">
    <table align="center" cellpadding="2" cellspacing="1">
      <tr align="center">
        <td class="tab-head"><table width="100%" cellspacing="0" cellpadding="0">
            <tr>
              <td class="text-title" height="25">例外设备</td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td class="list-tr1" align="center"><table id="table1" rules="all" border="1" cellspacing="0" cellpadding="0" >
            <tr>
              <td><table align="center" class="dg-tr">
                  <tr align="Center">
                    <td class="tab-title" width="80%">例外设备名或IP地址</td>
                    <td class="tab-title">删除</td>
                  </tr>
                </table></td>
            </tr>
            <tr style="display:none">
              <td id="ListItem"><table align="center" id="ListTbEx0" class="dg-tr">
                  <tr class="list-tr1">
                    <td align="center" width="80%"><input type="text" name="strDevGIP0"/>
                    </td>
                    <td align="Center"><a href="#" onClick="if(confirm('是否确定删除?')){dgDelete('ListTb0');}else{return false;}"> 删除 </a> </td>
                  </tr>
                </table></td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td class="tab-foot" align="center"><input type="hidden" name="num" value="1"/>
          <input type="hidden" name="from" id="from" value="overpc"/>
          <input id="btnAddEx" type="button" class="button" value="增加例外设备" onClick="dgAdd()">
        </td>
      </TR>
    </table>
    </td>
    </tr> 
  </form>
</table>
</body>
</HTML>

解决方案 »

  1.   

    cloneNode可以啊
    复制之后再改表单的ID就好了
    最不济也可以用document.forms进行循环,给每个form的id重新写值,你总不会加上百个形成在页面里吧,没法提交啦其实有什么问题一个form解决不了啊,为什么要加那么多form呢?
      

  2.   

    TO:softhot(SoftHot.com),谢谢你提供的参考，好象还是解决不了。
    TO：zhaoxiaoyang(梅雪香@深圳)，cloneNode之后如何更改表单及各控件ID呢？小小的给个参考吧。
      

  3.   

    <table id="table1" style="width:100%;border-collapse:collapse;table-layout:fixed;" cellpadding="0" cellspacing="0" border="1" bordercolor="#111">
    <tbody>
    <tr bgcolor="buttonface" height="20"><td width="50" class="cdata">序号</td><td style="width:33%;" class="title"><input type="text" style="background:transparent;border:none;font-size:12px;width:100%" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" value="ShipperID" readonly></td>
    <td style="width:33%;" class="title"><input type="text" style="background:transparent;border:none;font-size:12px;width:100%" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" value="CompanyName" readonly></td>
    <td style="width:33%;" class="title"><input type="text" style="background:transparent;border:none;font-size:12px;width:100%" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" value="Phone" readonly></td>
    </tr><tr height="20" bgcolor="#ffffff">
    <form id="formID1ID" method="post" target="bottom">
    <td width="50" class="cdata">1<span onClick="javascript:if(confirm('您确认要删除这条记录吗?')){delRow(this.parentElement.parentElement)}" style="cursor:default;">[×]</span></td>
    <td width="33%" class="cdata"><input type="text" id="ShipperIDID3ID" style="background:transparent;border:none;font-size:12px;width:100%;" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" name="ShipperID" value="3"><input type="hidden" name="oldShipperID" value="3"></td>
    <td width="33%" class="cdata"><input type="text" id="CompanyNameID3ID" style="background:transparent;border:none;font-size:12px;width:100%;" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" name="CompanyName" value="Federal Shipping"><input type="hidden" name="oldCompanyName" value="Federal Shipping"></td>
    <td width="33%" class="cdata"><input type="text" id="PhoneID3ID" style="background:transparent;border:none;font-size:12px;width:100%;" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" name="Phone" value="(503) 555-9931"><input type="hidden" name="oldPhone" value="(503) 555-9931"></td>
    </form>
    </tr></tbody>
    </table>
    <br><input type="button" value="添加" onclick="addRow()">
    <input type="button" value="检查ID" onclick="checkId()">
    <script language="JavaScript">
    <!--
    function addRow(){
    var tb = document.getElementById("table1");
    var rows = tb.rows;
    var len = rows.length;
    var newrow = rows[1].cloneNode( true );
    tb.firstChild.appendChild(newrow);
    var frmLen = document.forms.length;
    document.forms[frmLen-1].id="formID"+frmLen+"ID";
    }
    function checkId(){
    var tb = document.getElementById("table1");
    var rows = tb.rows;
    for(var i=1,j=rows.length; i<j; i++)
    //alert(rows[i].firstChild);
    alert("第"+i+"行的表单id为:"+rows[i].firstChild.id);
    }
    //-->
    </script>
    我要把有限的生命投入到无限的为人民回贴事业中去!
    谁解决我的三餐问题呢?BLOG: http://blog.csdn.net/meixuexiang
      

  4.   

    <table id="table1" style="width:100%;border-collapse:collapse;table-layout:fixed;" cellpadding="0" cellspacing="0" border="1" bordercolor="#111">
    <tbody id=tbody1 >
    <tr bgcolor="buttonface" height="20"><td width="50" class="cdata">序号</td><td style="width:33%;" class="title"><input type="text" style="background:transparent;border:none;font-size:12px;width:100%" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" value="ShipperID" readonly></td>
    <td style="width:33%;" class="title"><input type="text" style="background:transparent;border:none;font-size:12px;width:100%" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" value="CompanyName" readonly></td>
    <td style="width:33%;" class="title"><input type="text" style="background:transparent;border:none;font-size:12px;width:100%" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" value="Phone" readonly></td>
    </tr><tr height="20" bgcolor="#ffffff">
    <form name="formID1ID" method="post" target="bottom" onclick="alert(this.outerHTML)">
    <td width="50" class="cdata">1<span onClick="javascript:if(confirm('您确认要删除这条记录吗?')){delRow(this.parentElement.parentElement)}" style="cursor:default;">[×]</span></td>
    <td width="33%" class="cdata"><input type="text" id="ShipperIDID3ID" style="background:transparent;border:none;font-size:12px;width:100%;" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" name="ShipperID" value="3"><input type="hidden" name="oldShipperID" value="3"></td>
    <td width="33%" class="cdata"><input type="text" id="CompanyNameID3ID" style="background:transparent;border:none;font-size:12px;width:100%;" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" name="CompanyName" value="Federal Shipping"><input type="hidden" name="oldCompanyName" value="Federal Shipping"></td>
    <td width="33%" class="cdata"><input type="text" id="PhoneID3ID" style="background:transparent;border:none;font-size:12px;width:100%;" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" name="Phone" value="(503) 555-9931"><input type="hidden" name="oldPhone" value="(503) 555-9931"></td>
    </form>
    </tr></tbody>
    </table><input type=button value="复制粘贴以下表格行" onclick="testFun();">
    <input type=button value="测试结果" onclick="alert(document.all('formID'+(i-1)+'ID').outerHTML);">
    table2是个demo-table，可以隐藏起来：
    <table id="table2" style="width:100%;border-collapse:collapse;table-layout:fixed;" cellpadding="0" cellspacing="0" border="1" bordercolor="#111">
    <tbody><tr height="20" bgcolor="#ffffff">
    <form method="post" target="bottom" onclick="alert(this.outerHTML)" id=hello >
    <td width="50" class="cdata">1<span onClick="javascript:if(confirm('您确认要删除这条记录吗?')){delRow(this.parentElement.parentElement)}" style="cursor:default;">[×]</span></td>
    <td width="33%" class="cdata"><input type="text" id="ShipperIDID3ID" style="background:transparent;border:none;font-size:12px;width:100%;" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" name="ShipperID" value="3"><input type="hidden" name="oldShipperID" value="3"></td>
    <td width="33%" class="cdata"><input type="text" id="CompanyNameID3ID" style="background:transparent;border:none;font-size:12px;width:100%;" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" name="CompanyName" value="Federal Shipping"><input type="hidden" name="oldCompanyName" value="Federal Shipping"></td>
    <td width="33%" class="cdata"><input type="text" id="PhoneID3ID" style="background:transparent;border:none;font-size:12px;width:100%;" onfocus="this.style.backgroundColor='#ffffff';this.select();" onblur="this.style.backgroundColor='transparent'" name="Phone" value="(503) 555-9931"><input type="hidden" name="oldPhone" value="(503) 555-9931"></td>
    </form>
    </tr></tbody>
    </table><script>
    var i=2;
    function testFun()
    {
    var tempTr=table2.rows[0].cloneNode(true);
    tempTr.all[0].id="formID"+(i++)+"ID";
    tbody1.insertBefore(tempTr);}</script>
      

  5.   

    sorry,
    因为看到楼主的短信
    所以就写了
    仔细一看
    原来与楼上的一样id本来就是一个可读可写的属性
    搞得有点兴师动众
    影响不大好哦
    <input id=aaa type=button value=test 
    onclick="this.id='bbb';alert(this.outerHTML)">
      

  6.   

    感谢各位，我还是选择了用appendChild.