gpt4 book ai didi

javascript - 使用 jquery 克隆行

转载 作者:行者123 更新时间:2023-12-03 04:28:37 25 4
gpt4 key购买 nike

我有一个表,应该有一个选项来添加行和删除行。我使用 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 的初学者。

最佳答案

试试这个代码

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

关于javascript - 使用 jquery 克隆行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43590728/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com