问题描述
我试图通过单击第一行的加号图标在表格中添加新行,它工作正常并相应地添加表格行,但由于无法从第二行加号图标添加行而在第二行之后产生问题。这是什么jQuery 上的问题?
HTML
<html>
<div>
<div class="col-sm-12" style="overflow:auto">
<h5>Facilities</h5>
<table>
<thead>
<tr>
<td>S.No.</td>
<td>Facility</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<div class="editor-field">
<select>
<option>
Loding
</option>
<option>
Floading
</option>
<option>
Coaching
</option>
</select>
</div>
</td>
<td class='text-center'>
<button id="addRow"><i class="fas fa-plus"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</html>
这是 jquery 部分,这里一定有问题!
jquery
$(function () {
$("#addRow").click(function () {
var row = $('<tr id="tablerow0" ng-repeat="newbedata in bedata.BTDColl">
<td td align="center">1</td><td> <div class="editor-field">
<select class="form-control form-control-sm" name="Name" id="cboName" ng-model="newbedata.FacilitiesId" required>
<option ng-repeat="ht in NameColl track by ht.FacilitiesId" value="{{ ht.FacilitiesId }}" ng-selected=" ht.FacilitiesId==newbedata.FacilitiesId">
Loding
</option>
<option ng-repeat="ht in NameColl track by ht.FacilitiesId" value="{{ ht.FacilitiesId }}" ng-selected=" ht.FacilitiesId==newbedata.FacilitiesId">
Floading
</option>
<option ng-repeat="ht in NameColl track by ht.FacilitiesId" value="{{ ht.FacilitiesId }}" ng-selected=" ht.FacilitiesId==newbedata.FacilitiesId">
Coaching
</option>
</select>
</div>
</td>
<td align="center">
<button type="button" class="btn btn-default btn-light btn-sm" style="padding:0px 3px;">
<a id=\'addRow\' ng-click="addrow()"><i class="fa fa-plus"></i></a></button>
<button type="button" class="btn btn-default btn-light btn-sm" style="padding:0px 3px;">
<a class="close p-0"><i class="fas fa-trash-alt" style="font-size:20px;"></i></a></button>
</td>
</tr>;');
$("#clientTable tbody").append(row);
});
});
$(document).on('click','.close',function(e) {
$(this).parent().parent().parent().remove();
});
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)