I have created a table with multiple columns and written a jquery javascript that duplicates or clones the the last row of the table. However when it clones the last row it also gives each column the same name and id as the previous row.

jsp code:

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

    });
});

The expected output i would like is for the duplicated table row where id in id1 is the orignal tables td id and 1 is appended to it. and that if i was to add another row to the table where id in id2 is the orignal tables td id and 2 is appended to it.

I have created a table with multiple columns and written a jquery javascript that duplicates or clones the the last row of the table. However when it clones the last row it also gives each column the same name and id as the previous row.

jsp code:

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

    });
});

The expected output i would like is for the duplicated table row where id in id1 is the orignal tables td id and 1 is appended to it. and that if i was to add another row to the table where id in id2 is the orignal tables td id and 2 is appended to it.

• javascript
• jquery
• html
• mysql
• clone

Share Improve this question Follow edited Jun 21, 2017 at 18:44 Govind Samrow 10.2k1414 gold badges5959 silver badges9090 bronze badges asked Jun 21, 2017 at 17:52 Jeremey SamarooJeremey Samaroo 6511 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try next one:

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