jQuery复制表格行并为复制的表格行分配新ID

Question

jQuery复制表格行并为复制的表格行分配新ID

4

我已经创建了一个包含多列的表格，并编写了一个 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); 

    });
});

我期望的输出是复制的表格行，其中 id 在 id1 中为原始表格的 td id，并在其后附加 1。如果我要向表格添加另一行，其中 id 在 id2 中为原始表格的 td id，并在其后附加 2。

- Jeremey Samaroo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FieryCat · Accepted Answer

请尝试下一个：

 $(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>