javascript - jQuery重复表行并将新ID分配给重复表行

Question

我创建了一个包含多列的表并编写了一个 jquery javascript 来复制或克隆表的最后一行。但是，当它克隆最后一行时，它还会为每一列提供与前一行相同的名称和 ID。

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); 

    });
});

我想要的预期输出是重复的表行 其中 id1 中的 id 是原始表 td id 并附加了 1。如果我要在表中添加另一行其中 id2 中的 id 是原始表 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>