Cloning rows with jquery

Question

I have a table which should have an option to add a row and delete a row. I used jquery to insert HTML and it worked perfectly, but I was told this method may have drawbacks and I should rather consider cloning. After doing some more research, I tried implementing it in my website. It doesn't seem to be working.

My html code:

<div class="row">
                            <div class="col-md-12">
                                <br/>
                                <!--A card inside the second tab, and the table is inside the card-->
                                <div class="card">
                                    <div class="header">
                                        <h4 class="title">1.1 Teaching</h4>
                                        <p class="category">Please Add the Courses taught in the academic year</p>
                                    </div>
                                <div class="content">
                                    <div class="content table-responsive table-full-width" id="t_table">
                                        <table class="table table-hover table-striped" id="t_tab_logic">
                                            <thead>
                                                <th>#</th>
                                                <th>Course</th>
                                                <th>Section</th>
                                                <th>Session</th>
                                                <th>Term</th>
                                                <th>Day/Evening</th>
                                                <th>%age Taught</th>
                                                <th>Load/Overload</th>
                                                <th>Enrolment</th>
                                                <th>Number of T.As/IAs</th>
                                            </thead>
                                            <tbody>
                                                <tr class="tr_clone">
                                                <td>
                                                    1
                                                </td>
                                                <td>
                                                    <input type="text" name='t_name0'  placeholder='Name' class="form-control"/>
                                                </td>
                                                <td>
                                                    <input type="text" name='t_section0' placeholder='Section' class="form-control"/>
                                                </td>
                                                <td>
                                                    <input type="text" name='t_session0' placeholder='Session' class="form-control"/>
                                                </td>
                                                <td>
                                                    <input type="number" name='t_term0' placeholder='Term' class="form-control"/>
                                                </td>
                                                <td>
                                                    <input type="text" name='t_day0' placeholder='D/E' class="form-control"/>
                                                </td>
                                                <td>
                                                    <input type="number" name='t_%age0' placeholder='%age' class="form-control"/>
                                                </td>
                                                <td>
                                                    <input type="text" name='t_load0' placeholder='Load/Over' class="form-control"/>
                                                </td>
                                                <td>
                                                    <input type="number" name='t_enrolment0' placeholder='#' class="form-control"/>
                                                </td>
                                                <td>
                                                    <input type="number" name='t_number0' placeholder='#' class="form-control"/>
                                                </td>
                                                </tr>

                                            </tbody>
                                        </table>

                                        <div class="row">
                                            <div class="col-sm-2">
                                                <a id="t_add_row" class="btn btn-primary btn-fill pull-left">Add Row</a>
                                            </div>
                                            <div class="col-sm-2 col-sm-offset-8">
                                                <a id="t_delete_row" class="btn btn-submit btn-fill pull-right">Delete Row</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </div>

                        </div>

And my java script code looks like:

$(document).ready(function () {

$("#t_add_row").live('click', function(){
   var $tr = $(this).closest('.tr_clone');
   var $clone = $tr.clone();
   $clone.find(":text").val('');
   $tr.after($clone);
});

});

I would also like to implement the delete row link, which I felt would be implemented after I implement the add row link. Any help would be greatly appreciated, thank you for being patient, I am sort of a beginner at jQuery.

Possible duplicate of [jQuery Clone table row](http://stackoverflow.com/questions/7961900/jquery-clone-table-row) — Jonast92, Apr 24 '17 at 14:27

score 1 · Accepted Answer · answered Apr 24 '17 at 14:37

1

try this code

$("body").on('click','#t_add_row', function(){
   var tr = $('#t_tab_logic .tr_clone:last');
   var clone = tr.clone();
   clone.find("input").val('');
   tr.after(clone);
});

answered Apr 24 '17 at 14:37

Terlan Abdullayev

327
2
8

That's amazing. Thank you so much for your help! Could you possible also give me ideas on how to implement the delete row part? – Muhammad Apr 24 '17 at 14:42
$("body").on('click','.t_del_row', function(){ $(this).parents('.tr_clone:eq(0)').remove(); }); – Terlan Abdullayev Apr 24 '17 at 14:48
Thanks, I tried doing something like this: $("body").on('click','#t_delete_row', function(){ $('#t_table_logic .tr_clone:last').remove(); }); but this seems to be not working. – Muhammad Apr 24 '17 at 15:03

Cloning rows with jquery

1 Answers1