微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在使用 jQuery 单击表格中的第一个添加按钮后添加表格行的问题?

如何解决在使用 jQuery 单击表格中的第一个添加按钮后添加表格行的问题?

我试图通过单击第一行的加号图标在表格中添加新行,它工作正常并相应地添加表格行,但由于无法从第二行加号图标添加行而在第二行之后产生问题。这是什么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 举报,一经查实,本站将立刻删除。