從表中洗掉行時正在洗掉表頭

當我從表中洗掉行時，表頭也被洗掉，我該如何解決這個問題？

$('#clubs tbody').on('click', '.deleteBtn', function() {
   $(this).closest('tr').remove();  
});

按鈕標簽

<td>
  <button class="mb-1 btn bg-danger fas fa-trash-alt deleteBtn" 
                     title=@DbResHtml.T("Delete", "Resources")></button>
</td>

我的按鈕有一類，.delete所以當我點擊它時，我的行與我的table header.

我的表有 and idof clubswhile table bodyhave and id of clubsTBody.

桌子

<div class="table-responsive">
  <table class="table table-striped my-4 " id="clubs">
    <thead>
      <tr>
        <th>@DbResHtml.T("#", "Resources")</th>
        <th>@DbResHtml.T("Клуб", "Resources")</th>
        <th>@DbResHtml.T("Лига", "Resources")</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="clubsTBody">
@foreach (var club in Model.Player.PlayerClubs)
  {
      <tr>
        <td>@Html.DisplayFor(x => count)</td>
        <td>@Html.DisplayFor(x => club.Club.Name)</td>
        <td>@Html.DisplayFor(x => club.Club.League.LeagueType)</td>
        <td>
          <button class="mb-1 btn bg-danger fas fa-trash-alt deleteBtn"
                             title=@DbResHtml.T("Delete", "Resources")></button>
        </td>
      </tr>
  count  ;
  }
    </tbody>
  </table>
</div>

我也在我的表中動態添加行。

$(document).ready(function() {
  $('#select2-3').change(function() {
    var cc  = $('#select2-3').val();
    var ids = [];
    for (let i = 0; i < cc.length;i  ) {
      ids.push(cc[i]);
    }
    $.ajax({
      type    : "POST",
      url     : "@Url.Action("GetClubsById","Player")",
      data    : {"ids": ids},
      success : function(data) {
        console.log(data);
        $('#clubs tr').remove();
        var counter = 1;
        for (let i = 0; i < data.length; i  ) {
          $("#clubsTBody").append("<tr><td>"   counter   "</td>"
              "<td>"   data[i].name   "</td>"
              "<td>"   data[i].league.leagueType   "</td>"
              "<td>"   '<button    [email protected]("Delete", "Resources")></button>'   "</td>" 
              "</tr >");
          counter  ;
        }
      },
      error: function(req, status, error) {
          console.log(msg);
      }
    });
    
    $('.deleteBtn').on('click', function() {
      $(this).closest('tr').remove();

      var value = $(this).closest('tr').children('td:eq(1)').text();
      $(`#select2-3 option:selected:contains("${value}")`).prop("selected", false).parent().trigger("change");
    });
  })
    
// /.../

})

問題就在這里，當我從選擇串列中洗掉所選專案時，如果沒有此代碼，一切正常，但所選專案不會被取消選擇。

$(`#select2-3 option:selected:contains("${value}")`)
  .prop("selected", false)
  .parent()
  .trigger("change");

uj5u.com熱心網友回復：

$(document).ready(function() {
        $('#select2-3').change(function() {
            var cc = $('#select2-3').val();
            var ids = [];
            for (let i = 0; i < cc.length;i  ){
                ids.push(cc[i]);
            }

            $.ajax({
                type: "POST",
                url: "@Url.Action("GetClubsById","Player")",
                data: {"ids": ids},
                success: function(data) {
                    console.log(data);
                    $('#clubsTBody tr').remove();
                    var counter = 1;
                    for (let i = 0; i < data.length; i  ) {
                    $("#clubsTBody").append("<tr><td>"   counter   "</td>"
                      "<td>"   data[i].name   "</td>"
                      "<td>"   data[i].league.leagueType   "</td>"
                      "<td>"   '<button    [email protected]("Delete", "Resources")></button>'   "</td>" 
                      "</tr >");
                        counter  ;
                    }
                },
                error: function(req, status, error) {
                    console.log(msg);
                }
            });

          $('.deleteBtn').on('click', function() {
            $(this).closest('tr').remove();

            var value = $(this).closest('tr').children('td:eq(1)').text();
            $(`#select2-3 option:selected:contains("${value}")`).prop("selected", false).parent().trigger("change");
        });
        });

你需要這樣寫：$('#clubsTBody tr').remove(); 而不是$('#clubs tr').remove(); 您正在洗掉 Ajax 回應中的所有 TR 而不是僅正文 TR

標籤：javascript jQuery dom jQuery-select2

上一篇：將Modulus11自校驗位PHP代碼轉換為JavaScript

下一篇：如何比較單選按鈕的值的總和>=3