动态表格产生的问题？

你三天都搞不定，看来我也不过差不多给个建议，你可以给添加的控件加“ID”——名同，ID不同，这样用起来就怎么用都行了。

解决方案 »

  1.   

    //////////////////////////////////////
    ///                                ///
    ///   研究了一会，实现了，如下：   ///
    ///                                ///
    //////////////////////////////////////
    <html><head>
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>动态表格</title>
    </head><body><form method="POST" name="form1">
    <script language="javascript">
    function AddNew(){
    var newRow;
    var newCell;
    var i=1;
    newRow = table1.insertRow();
    newCell=newRow.insertCell();
    newCell.width="164";
    newCell.innerHTML="<select size=\"1\" name=\"DrugID\" onchange='selectChange(this.value,table1.rows.length-3)'><option>please chose</option><option value=\"0\">one</option><option value=\"1\">two</option></select>"

    newCell=newRow.insertCell();
    newCell.width="164";
    newCell.innerHTML="<input type=\"text\" name=\"T1\" size=\"20\" value=T1"+(table1.rows.length-3)+">"

    newCell=newRow.insertCell();
    newCell.width="164";
    newCell.innerHTML="<input type=\"text\" name=\"T2\" size=\"20\">" //添加名字都是相同的文本框。

    // alert(table1.rows.length-3);
    }
    function selectChange(selvalue,id){ var Regions = new Array("one","Tow"); Regions[0]=new Array("湖北省","武汉市"); 

    Regions[1]=new Array("湖北省","咸宁市"); var e=event.srcElement.parentElement.parentNode.rowIndex-3;  //获取列表框所在行的行号。 if  (selvalue==0){
        document.getElementsByName("T1")[e].value= Regions[0][0];//改变与鼠标点击的列表框处于同一行的文本框的值。
        document.getElementsByName("T2")[e].value= Regions[0][1];     
    }
    if  (selvalue==1){
        document.getElementsByName("T1")[e].value= Regions[1][0];
        document.getElementsByName("T2")[e].value= Regions[1][1];      
    }
    }
    </script>
    <table id=table1 border="1" style="border-collapse: collapse" width="71%" height="70">
    <tr>
    <td width="164">　</td>
    <td width="220">　</td>
    <td><input type="button" value="Add" name="B1" onclick="AddNew()"></td>
    </tr>
    <tr>
    <td width="164">one</td>
    <td width="220">two</td>
    <td>three</td>
    </tr>
    <tr>
    <td width="164"><select size="1" name="DrugID" onchange='selectChange(this.value,0)'>
    <option value ="">---please chose---</option>
    <option value="0">one</option>
    <option value="1">two</option>
    </select></td>
    <td width="220"><input type="text" name="T10" size="20"></td>
    <td><input type="text" name="T20" size="20"></td>
    </tr>
    </table>
    </form></body></html>
      

  2.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title><style>
    TD,INPUT{ font-size:12; }
    </style>
    </head><body bgcolor=EEEEEE>
    <form name="frm" action="about:结果页面" method=post >
    <h4 align=center>代码改自：<a href="http://jkisjk.vip.sina.com/html/detailkeep2.htm" target="_blank">JK的动态明细示例</a></h4><table align="center" bordercolor=cccccc border=1  width=100% >
    <tr>
    <td width=500>
    </td>
    <td align=right>
          <input type="button"  value="增加" class="bottom" onclick="addDetailProcess();">&nbsp;              
          <input type="button"  value="完成" class="bottom" onclick="submitProcess();">
          
    </td>
    </tr>
    </table>
    <div width=100% id=thedetailtableDIV>
    <table align="center" bordercolor=cccccc border=1 width=100% >
      <tr bgcolor=eeeeee id="trDetailTitles"> 
        <td >one</td>
        <td >two</td>
        <td >three</td>
      </tr>
      
      <tbody id="tbDetailUsed" ><tr height=0 ><td colspan=100 height=0 > 合计</td></tr>
      </tbody> </table>
    </div>
    </form><!--复制的内容-->
    <table id="tbDetailPrepare" style="display:none">
    <tr>
    <td >
    <select size="1" name="DrugID" onchange='selectChange(this)'>
    <option value ="0">---please chose---</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    </select></td>
    <td ><input type="text" name="T1" size="20"></td>
    <td><input type="text" name="T2" size="20"></td>
    </tr>
    </table>
    <input name="theHistoryRecord" type=hidden value="">
    </body></html>
    <script language="javascript"> var Regions = new Array("--Please chose---","one","two","three");
    Regions[0]=new Array("",""); 
    Regions[1]=new Array("湖北省","武汉市"); 
    Regions[2]=new Array("湖北省","咸宁市");
    Regions[3]=new Array("湖北省","襄樊市");function selectChange(obj){obj.parentElement.parentElement.all.T1.value=Regions[obj.value][0];
    obj.parentElement.parentElement.all.T2.value=Regions[obj.value][1];
    }
    </script><script language=javascript> window.onload = historyOncemore;
    window.onbeforeunload = fixHistory; function fixHistory() //记住历史
    {
    document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(/\n/g,"");
    } function historyOncemore() //恢复历史
    {
    if (document.all("theHistoryRecord").value!="")
    {document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value;
    }
    }


    function addDetailProcess(afterRowIndex) //增加明细
    {
    var alltbDetailUsed= document.all("tbDetailUsed").rows;
    if (afterRowIndex==null)
    {
      afterRowIndex=alltbDetailUsed.length-2;
    }
    var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true);
    var desRow = alltbDetailUsed[afterRowIndex+1];
    desRow.parentElement.insertBefore(newRow,desRow ); }
    function submitProcess()
    {
          document.frm.submit();
    }
    </script>