0

我在 javascript 中添加和删除空白行时遇到了问题……这是一个嵌套问题和唯一 ID 问题。

总而言之，我有三个表单域。字段 1、金额 1、金额 2。Field1 可以有多个 Amount1 & Amount2。Field1也可以有多个，Amount1、Amount2也可以有多个。问题是我的“添加”按钮复制了额外的 Amount1、Amount2（如果存在）。只是为了解释一下，“添加行”添加了 Amount1，Amount2。选中复选框时，“删除行”将删除 Amount1,Amount2。

当我单击“添加”按钮时，我想要一个新的 Field1、Amount1、Amount2 但没有额外的 Amount1、Amount2。当我在其他表单字段集中单击“添加行”或“删除行”时，我希望它在该特定集中添加或删除 Amount1、Amount2。

我需要为每一整行分配一个唯一标识符以使其正常工作，但无法弄清楚。

这是我的代码，如果执行它可能会更有意义。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"><head>

    <script type="text/javascript">

    function addRow(tableID) {               
    var table = document.getElementById(tableID);               
    var rowCount = table.rows.length;             
    var row = table.insertRow(rowCount);               
    var colCount = table.rows[0].cells.length;               
     for(var i=0; i<colCount; i++) {                   
    var newcell = row.insertCell(i);                   
     newcell.innerHTML = table.row[0].cells                                                [i].innerHTML; //alert                                                       (newcell.childNodes);
switch(newcell.childNodes[0].type) {                     


    case "text":                             
    newcell.childNodes[0].value = "";                            
    break;                     
    case "checkbox":                             
    newcell.childNodes[0].checked = false;                             
    break;                     
    case "select-one":                             
    newcell.childNodes[0].selectedIndex = 0;                            
    break;   

    }             
    }         
    }

    function deleteRow(tableID) {             
     try {             
       var table = document.getElementById(tableID);             
       var rowCount = table.rows.length;               
         for(var i=0; i<rowCount; i++) {                 
       var row = table.rows[i];                 
       var chkbox = row.cells[0].childNodes[0];                 
        if(null != chkbox && true == chkbox.checked) {                     
        if(rowCount <= 1) {                         
           alert("Cannot delete all the rows.");                        
       break;                     
      }  

     table.deleteRow(i);                     
      rowCount--;                    
       i--;                 
       }                 
       }             
       }catch(e) 
       {                 
       alert(e);             
       }         
       }


       var _counter = 0;
       function Add() {
           _counter++;
           var oClone = document.getElementById("template").cloneNode(true);
           oClone.id += (_counter + "");
           document.getElementById("placeholder").appendChild(oClone);
       }

       </script>
       </head>



       <body>

    <fieldset id="fieldset">

        <div id="placeholder">
        <div id="template">


           <br>


    <table  id= "act_legis">
            <tr>
                <td>Field1:</td>
                <td>Amount1:</td>
        <td>Amount2:</td>
                <td>&nbsp;</td> 
        </tr>
    </table>


    <table id= "act">
            <tr>  
                <td>
                    <button type="button" name="Submit" 
                     align = "left" onclick="Add();">Add</button>
                    <input name="Field1" type="text" size="4" maxlength="4"/></td>    
            </tr>
    </table>


    <table id= "legis_amounts">
            <tr>
                <td>
                    <input type="checkbox" name="chk"/>
                    <input name="Amount1" type="text" size="10"maxlength="18"/>
               </td>
      <td>
                 <input name="Amount2" type="text" size="10" maxlength="18"/>
      </td>
           </tr>
    </table>

    <table>
    <tr>
        <td>
                    <input type="button" onclick="addRow('legis_amounts');
            return false;"  value = "add row"/>
            <input type="button" value = "delete row" onclick="deleteRow
                    ('legis_amounts');return false;"  />
                  </td>
    </tr>
    </table>

        </div> <!-- template -->
        </div> <!-- placeholder -->
        </fieldset>

    <table>
            <tr>
                <td><p>&nbsp;</p>
                </td>
            </tr>
    </table>


    </body>
    </html>
4

0 回答 0