jQuery Duplicate Table行，並分配新的ID複製錶行

Question

我已經創建了一個多列的表，並寫了一個jQuery的JavaScript，複製或克隆表的最後一行。但是，當它克隆最後一行時，它也會爲每列提供與前一行相同的名稱和標識。

JSP代碼：

<div id="invTruck" class="invTruck"> 
      <table id="tbl_invTruck" width="100%" border="0"> 
      <tbody> 
       <tr> 
        <td width="15%" style="display:none;"><center>Work Order Id</center></td> 
        <td width="17%"><center>Truck Type</center></td> 
        <td width="17%"><center>Licences Plate #</center></td> 
        <td width="17%"><center>Driver ID</center></td> 
        <td width="17%"><center>Max Haulage Weight</center></td> 
        <td width="17%"><center>Job Number</center></td> 
       </tr> 

       <tr> 
        <td style="display:none;"><input name="wInv_work_Id" type="text"></td> 
        <td><select id="invTru_Type" name="invTru_Type" onchange="getTruckPlates(this.value)"> 
         <option disabled selected hidden value="">Select A Truck Type</option> 
         <%while(rsinvTru1.next()){%> 
         <option><%=rsinvTru1.getString(1)%></option> 
         <%}%> 
         </select> 
        </td> 
        <td><select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo" required> 
         <option disabled selected hidden value="">Select A Truck</option> 

         </select></td> 
        <td><input name="driver_emp_Id" type="text"></td> 
        <td><input name="invTru_MaxHw" type="text"></td> 
        <td><input name="" type="text"></td> 
       </tr> 
       </tbody> 
      </table> 
      <table width="100%" height="50%" border="0"> 
       <tr> 
        <td width="50%"><input class="buttonCreateInv" id="btn_AddTruck" type="button" value="Add A Truck"></td> 
        <td width="50%"><input class="buttonCreateInv" name="btn_RemoveTruck" type="button" value="Remove A Truck"></td> 
       </tr> 
      </table> 
      </div> 

的JQuery的Javascript：

$(document).ready(function(){ 
    $("#btn_AddTruck").click(function(){ 
     var $tableBody = $('#tbl_invTruck').find("tbody"), 
     $trLast = $tableBody.find("tr:last"), 
     $trNew = $trLast.clone(); 

    $trLast.after($trNew); 

    }); 
}); 

預期輸出我想是被複制的錶行 其中id在ID1是一部開拓創新的表TD ID和1被附加到它。 並且如果我要向表中添加另一行 其中，id2中的id是orignal表的td id和2被附加到它。

Answer 1

嘗試下一個：

$(document).ready(function() { 
 
      $("#btn_AddTruck").click(function() { 
 
       var $tableBody = $('#tbl_invTruck').find("tbody"), 
 
       $trLast = $tableBody.find("tr:last"), 
 
       $trNew = $trLast.clone(); 
 
       // Find by attribute 'id' 
 
       $trNew.find('[id]').each(function() { 
 
        var num = this.id.replace(/\D/g, ''); 
 
        if (!num) { 
 
         num = 0; 
 
        } 
 
        // Remove numbers by first regexp 
 
        this.id = this.id.replace(/\d/g, '') 
 
         // increment number 
 
         + (1 + parseInt(num, 10)); 
 
       }); 
 
     
 
       $trLast.after($trNew); 
 
     
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div id="invTruck" class="invTruck"> 
 
       <table id="tbl_invTruck" width="100%" border="0"> 
 
       <tbody> 
 
        <tr> 
 
         <td width="15%" style="display:none;"><center>Work Order Id</center></td> 
 
         <td width="17%"><center>Truck Type</center></td> 
 
         <td width="17%"><center>Licences Plate #</center></td> 
 
         <td width="17%"><center>Driver ID</center></td> 
 
         <td width="17%"><center>Max Haulage Weight</center></td> 
 
         <td width="17%"><center>Job Number</center></td> 
 
        </tr> 
 

 
        <tr> 
 
         <td style="display:none;"><input name="wInv_work_Id" type="text"></td> 
 
         <td><select id="invTru_Type" name="invTru_Type" onchange="getTruckPlates(this.value)"> 
 
          <option disabled selected hidden value="">Select A Truck Type</option> 
 
          <!-- %while(rsinvTru1.next()){%> 
 
          <option><%=rsinvTru1.getString(1)%></option> 
 
          <%}% --> 
 
          </select> 
 
         </td> 
 
         <td><select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo" required> 
 
          <option disabled selected hidden value="">Select A Truck</option> 
 

 
          </select></td> 
 
         <td><input name="driver_emp_Id" type="text"></td> 
 
         <td><input name="invTru_MaxHw" type="text"></td> 
 
         <td><input name="" type="text"></td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       <table width="100%" height="50%" border="0"> 
 
        <tr> 
 
         <td width="50%"><input class="buttonCreateInv" id="btn_AddTruck" type="button" value="Add A Truck"></td> 
 
         <td width="50%"><input class="buttonCreateInv" name="btn_RemoveTruck" type="button" value="Remove A Truck"></td> 
 
        </tr> 
 
       </table> 
 
       </div>