javascript - 将行动态添加到网页不起作用

Question

我正在尝试合并一个用于向 HTML 页面动态添加行的代码。该代码独立运行良好。但是当我将它添加到带有 DIV 的下一页时，它不起作用。非常感谢您的任何意见。

会不会是因为div里面的函数$(document).ready(function()？:(

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");

    }
    document.getElementById(cityName).style.display = "block";
  


    evt.currentTarget.className += " active";
}

var name = 'null';

document.getElementById(name).click();


           window.onload = function() {
  hide();
};
        function hide(){
var VSalePrice = document.getElementById('VPriceSelect0');
VSalePrice.style.visibility = 'hidden';
}
        $(document).ready(function() {
            var x=1;
       $("#mode").on('change', function () {
var rows = parseInt(this.value);
var lastRow;
for (var i = x; i < rows+x; i++) {
    lastRow = $('#customers tr').last().clone();
    $('#customers tr').last().after(lastRow);
    document.getElementById("V_Prod_Name0").id="V_Prod_Name"+i;
    document.getElementById("VPriceSelect0").id="VPriceSelect"+i;

    document.getElementById("qty0").id="qty"+i;
    document.getElementById("ex-gst0").id="ex-gst"+i;
    document.getElementById("ngstpct0").id="ngstpct"+i;
    document.getElementById("gstpct0").id="gstpct"+i;
    document.getElementById("igstpct0").id="igstpct"+i;

    document.getElementById("gst0").id="gst"+i;
    document.getElementById("inc-gst0").id="inc-gst"+i;
    
}
x=i;
     }); 
           });
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-3.3.1.min.js"></script>

<div class="tab">
     <button class="tablinks"id='0' onclick="openCity(event, 'Sales')">Sales</button> 
    
</div>
<div id="Sales" class="tabcontent">    
  <h3>Sales</h3>
       
       <form name="ISales" action="MultiEntry.jsp">
            
       <table id="customers">
          <th>Product</th>
          <th>Quantity</th> 
          <th>Price</th>
          <th>*CGST %</th>
          <th>*SGST %</th>
          <th>*IGST %</th>
          <th>Total Tax</th>
          <th>Total Price</th>
          <th>Commission</th>
          <th>Sale Date</th>

          <tr>
             <td>
                <select id="V_Prod_Name0" name='Prod_Type' onChange="displaySalePrice()">
                  <option value="NIGHTS">1001 NIGHTS</option>
                  <option value="ADIDAS"selected>ADIDAS</option>
                  <option value="ALMOND OIL">ALMOND OIL</option>
                  <option value="BLUE LADY">BLUE LADY</option>   
                </select>
             </td>
           
             <td><input type='text' name='Quantity' value="1" size = "4" id='qty0'></td>
             <td><input  type='text' id="ex-gst0" name='Sale_Price' size="6" ></td>
             <td><input type='text' id="ngstpct0" name='ngstpct' value="5.00" size="6"</td> 
             <td><input type='text' id="gstpct0" name='sgstpct' value="0.00" size="6" ></td>
             <td><input type='text' id="igstpct0" name='igstpct' value="0.00" size="6" ></td>
             <td><input type='text' id="gst0" name='tot_tax' size="6" ></td>
             <td><input type='text'  id="inc-gst0" size="6" name='total_price' value="0.00" ></td>
             <td><input type='text' name="Commission" id="Commission" size="6" value="0.00"></td>
             <td><input type='Date' id='SDate' size="8" name='SDate'></td>
             <td><input type='hidden' name='InsertSwitch' Value='SalesInsert'></td>
             <td> 
       
              <select id="VPriceSelect0" name='VSale_Price'>
                 <option value="120">120</option>
                 <option value="150">150</option>
                 <option value="250">250</option>
                 <option value="200">200</option>
                 <option value="250">250</option>
                 <option value="50">50</option>
                 <option value="15">15</option>
                 <option value="140">140</option>   
              </select></td>
       </tr>  
  </table> 


  <table>
    <tr>
      <td>
         <select name = "mode" id = "mode" onchange="addrow('customers')">
            <option value="">Add More Records</option>
            <option value="1">1 Record</option>
            <option value="2">2 Records</option>
            <option value="3">3 Records</option>
            <option value="4">4 Records</option>
            <option value="5">5 Records</option>
         </select>
      </td>
     </tr>      
   </table>
    <br></br>

   <button class="button" type="submit">Add Sales</button>
   <button class="button" type="reset">Reset</button>
</form>

Answer 1

试试这个，它应该可以工作。我刚刚删除了这段代码:

document.getElementById(name).click();

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");

    }
    document.getElementById(cityName).style.display = "block";
  


    evt.currentTarget.className += " active";
}

           window.onload = function() {
  hide();
};
        function hide(){
var VSalePrice = document.getElementById('VPriceSelect0');
VSalePrice.style.visibility = 'hidden';
}
        $(document).ready(function() {
            var x=1;
       $("#mode").on('change', function () {
var rows = parseInt(this.value);
var lastRow;
for (var i = x; i < rows+x; i++) {
    lastRow = $('#customers tr').last().clone();
    $('#customers tr').last().after(lastRow);
    document.getElementById("V_Prod_Name0").id="V_Prod_Name"+i;
        document.getElementById("VPriceSelect0").id="VPriceSelect"+i;

            document.getElementById("qty0").id="qty"+i;

    document.getElementById("ex-gst0").id="ex-gst"+i;
        document.getElementById("ngstpct0").id="ngstpct"+i;
    document.getElementById("gstpct0").id="gstpct"+i;
        document.getElementById("igstpct0").id="igstpct"+i;

    document.getElementById("gst0").id="gst"+i;
    document.getElementById("inc-gst0").id="inc-gst"+i;
    
}
x=i;
     }); 
           });
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-3.3.1.min.js"></script>

<div class="tab">
     <button class="tablinks"id='0' onclick="openCity(event, 'Sales')">Sales</button> 
    
</div>
<div id="Sales" class="tabcontent">    
  <h3>Sales</h3>
       <form name="ISales" action="MultiEntry.jsp">
            
       <table id="customers">
        <th>Product</th>
           <th>Quantity</th> <th>Price</th><th>*CGST %</th><th>*SGST %</th><th>*IGST %</th><th>Total Tax</th><th>Total Price</th><th>Commission</th><th>Sale Date</th>

          <tr>
               
               <td>
           <select id="V_Prod_Name0" name='Prod_Type' onChange="displaySalePrice()">
<option value="NIGHTS">1001 NIGHTS</option>
<option value="ADIDAS"selected>ADIDAS</option>
<option value="ALMOND OIL">ALMOND OIL</option>
<option value="BLUE LADY">BLUE LADY</option>   
</select>
    

           </td>
           
          
                                
           

          
                      <td><input type='text' name='Quantity' value="1" size = "4" id='qty0'></td>


 
 <td><input  type='text' id="ex-gst0" name='Sale_Price' size="6" ></td>
                <td><input type='text' id="ngstpct0" name='ngstpct' value="5.00" size="6"</td>

                        <td><input type='text' id="gstpct0" name='sgstpct' value="0.00" size="6" ></td>
                                                <td><input type='text' id="igstpct0" name='igstpct' value="0.00" size="6" ></td>

                        <td><input type='text' id="gst0" name='tot_tax' size="6" ></td>

                                <td><input type='text'  id="inc-gst0" size="6" name='total_price' value="0.00" ></td>
                                <td><input type='text' name="Commission" id="Commission" size="6" value="0.00"></td>



 <td><input type='Date' id='SDate' size="8" name='SDate'></td>

 
 <td><input type='hidden' name='InsertSwitch' Value='SalesInsert'></td>

 <td> <select id="VPriceSelect0" name='VSale_Price'>
               
               
<option value="120">120</option>
<option value="150">150</option>
<option value="250">250</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="50">50</option>
<option value="15">15</option>
<option value="140">140</option>   
               
          
</select></td>

   
  
  </tr>  
 
 
  
</table> 

 

       
       
       
    
               <table>
 <tr>
      <td>
         <select name = "mode" id = "mode" onchange="addrow('customers')">
        <option value="">Add More Records</option>
        <option value="1">1 Record</option>
        <option value="2">2 Records</option>
        <option value="3">3 Records</option>
        <option value="4">4 Records</option>
        <option value="5">5 Records</option>
     </select>
      </td>

  </tr>      
               </table>
<br></br>

<button class="button" type="submit">Add Sales</button>
<button class="button" type="reset">Reset</button>
</form>