javascript - 使用 jquery 克隆行

Question

我有一个表，应该有一个选项来添加行和删除行。我使用 jquery 插入 HTML，它工作得很好，但我被告知这种方法可能有缺点，我应该考虑克隆。经过更多研究后，我尝试在我的网站上实现它。它似乎不起作用。

我的html代码:

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

我的 java 脚本代码如下所示:

$(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);
});

});

我还想实现删除行链接，我认为在实现添加行链接后会实现该链接。 任何帮助将不胜感激，感谢您的耐心，我是 jQuery 的初学者。

Answer 1

试试这个代码

$("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);
});