jquery - 如何使用 jquery 仅处理突出显示的行？

Question

所以我在一个表中有一个列表或记录，我在行单击时附加到另一个表中。因此，当我单击一行时，它会突出显示，我可以将其添加到另一个表中。问题是我拥有的 appendTo 函数在行单击事件中起作用，但我只想处理突出显示的行....目前，如果我单击一行然后单击另一行，即使只处理这两行，它也会处理这两个行我的表格中突出显示了一行。

下面是带有 2 个表的 Jquery 函数：

        $(document).ready(function () {

        $('#ProcessList_btn').hide();
        $('#CancelSelection').hide();
        $('#UpdateDBRecs').hide();

        $('.MatchedTransctions tbody tr').click(function (e) {

            $('.MatchedTransctions tbody tr').removeClass('highlighted');

            if ($(this).addClass('highlighted', function () {

                var $row1 = $(this).clone();
                var $chkbx = $('<td class="SelectedItemCHKBX"><input type="checkbox" id="SelectedItem" class="SelectedItem" /></td>');
                $('#ProcessList_btn').show();
                $('#CancelSelection').show();
                $('.SelectedtItemCHKBX').removeAttr('checked');

                $('#ProcessList_btn').click(function () {
                    $row1.prepend($chkbx);
                    $row1.appendTo('#SelectedForProcessing tbody');
                    $('#UpdateDBRecs').show();
                });

            }));

            $('#CancelSelection').click(function () {
                $('.MatchedTransctions tbody tr').removeClass('highlighted');
            });
        });
    })



    <div id="MatchedTransctions" class="MatchedTransctions">
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Region)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Person)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Item)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Units)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.UnitCost)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Total)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.AddedOn)
                </th>
            </tr>
        </thead>
        @foreach (var item in Model)
        {
            <tbody>
                <tr onclick="toggleClass(this,'selected');">
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Region)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Person)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Item)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Units)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.UnitCost)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Total)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.AddedOn)
                    </td>
                </tr>
            </tbody>
        }
    </table>
    <div>
    </div>
</div>



    <div id="SelectedForProcessing">
    <table class="table" id="SelectedForProcessing">
        <thead>
            <tr>
                <th>
                    Select Record
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Region)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Person)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Item)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Units)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.UnitCost)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Total)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.AddedOn)
                </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div>
    </div>
</div>

标签： jquery

Answer 1

目前，如果我单击一行，然后单击另一行，它将处理这两行

发生的事情是，当您单击该行时，您添加了一个新的事件处理程序来克隆该行（在单击过程中）。然后单击另一行，它会添加另一个事件处理程序来克隆新选择的行。

当您单击进程时，它会运行两个事件处理程序并复制两行。

这是嵌套事件处理程序的问题之一。

你有两个选择：

1. 当您将事件处理程序添加到进程按钮时，请关闭其他事件处理程序：

   $('#ProcessList_btn').off("click").click(function() ...
   

2. 处理在行之外单击的过程按钮单击，以便它查看突出显示的行而不是“当前”行

显示重复的片段：

$(document).ready(function() {

  $('#ProcessList_btn').hide();
  $('#CancelSelection').hide();
  $('#UpdateDBRecs').hide();

  $('.MatchedTransctions tbody tr').click(function(e) {

    $("#output").append("<p>row click</p>");

    $('.MatchedTransctions tbody tr').removeClass('highlighted');
    $(this).addClass('highlighted');

    var $row1 = $(this).clone();
    var $chkbx = $('<td class="SelectedItemCHKBX"><input type="checkbox" id="SelectedItem" class="SelectedItem" /></td>');
    $('#ProcessList_btn').show();
    $('#CancelSelection').show();
    $('.SelectedtItemCHKBX').removeAttr('checked');

    $('#ProcessList_btn').click(function() {
      $("#output").append("<p>process click</p>");
      $row1.prepend($chkbx);
      $row1.appendTo('#SelectedForProcessing tbody');
      $('#UpdateDBRecs').show();
    });

    $('#CancelSelection').click(function() {
      $('.MatchedTransctions tbody tr').removeClass('highlighted');
    });
  });
})

.highlighted {
  background-color: yellow;
}

#output {
  border: 1px solid #ccc;
}

p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="MatchedTransctions" class="MatchedTransctions">
  <table class="table">
    <thead>
      <tr>
        <th>
          Id
        </th>
        <th>
          Region
        </th>
        <th>
          Person
        </th>
      </tr>
    </thead>
    <tbody>
      <tr xxxonclick="toggleClass(this,'selected');">
        <td>
          1
        </td>
        <td>
          R1
        </td>
        <td>
          P1
        </td>
      </tr>
    </tbody>

    <tr xxxonclick="toggleClass(this,'selected');">
      <td>
        2
      </td>
      <td>
        R2
      </td>
      <td>
        P2
      </td>
    </tr>

  </table>
  <div>
  </div>
</div>

<button id="ProcessList_btn" style='display:none;'>
Process
</button>

<div id="SelectedForProcessingDuplicateID">
  <table class="table" id="SelectedForProcessing">
    <thead>
      <tr>
        <th>
          Select Record
        </th>
        <th>
          Id
        </th>
        <th>
          Region
        </th>
        <th>
          Person
        </th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<div id="output"></div>

片段使用.off

$(document).ready(function() {

  $('#ProcessList_btn').hide();
  $('#CancelSelection').hide();
  $('#UpdateDBRecs').hide();

  $('.MatchedTransctions tbody tr').click(function(e) {

    $("#output").append("<p>row click</p>");

    $('.MatchedTransctions tbody tr').removeClass('highlighted');
    $(this).addClass('highlighted');

    var $row1 = $(this).clone();
    var $chkbx = $('<td class="SelectedItemCHKBX"><input type="checkbox" id="SelectedItem" class="SelectedItem" /></td>');
    $('#ProcessList_btn').show();
    $('#CancelSelection').show();
    $('.SelectedtItemCHKBX').removeAttr('checked');

    $('#ProcessList_btn').off("click").click(function() {
      $("#output").append("<p>process click</p>");
      $row1.prepend($chkbx);
      $row1.appendTo('#SelectedForProcessing tbody');
      $('#UpdateDBRecs').show();
    });

    $('#CancelSelection').click(function() {
      $('.MatchedTransctions tbody tr').removeClass('highlighted');
    });
  });
})

.highlighted {
  background-color: yellow;
}

#output {
  border: 1px solid #ccc;
}

p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="MatchedTransctions" class="MatchedTransctions">
  <table class="table">
    <thead>
      <tr>
        <th>
          Id
        </th>
        <th>
          Region
        </th>
        <th>
          Person
        </th>
      </tr>
    </thead>
    <tbody>
      <tr xxxonclick="toggleClass(this,'selected');">
        <td>
          1
        </td>
        <td>
          R1
        </td>
        <td>
          P1
        </td>
      </tr>
    </tbody>

    <tr xxxonclick="toggleClass(this,'selected');">
      <td>
        2
      </td>
      <td>
        R2
      </td>
      <td>
        P2
      </td>
    </tr>

  </table>
  <div>
  </div>
</div>

<button id="ProcessList_btn" style='display:none;'>
    Process
    </button>

<div id="SelectedForProcessingDuplicateID">
  <table class="table" id="SelectedForProcessing">
    <thead>
      <tr>
        <th>
          Select Record
        </th>
        <th>
          Id
        </th>
        <th>
          Region
        </th>
        <th>
          Person
        </th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<div id="output"></div>

片段以复制突出显示的行

$(document).ready(function() {

  $('#ProcessList_btn').hide();
  $('#CancelSelection').hide();
  $('#UpdateDBRecs').hide();

  $('#ProcessList_btn').click(function() {

    $("#output").append("<p>process click</p>");

    var $row1 = $('.MatchedTransctions tbody tr.highlighted').clone();
    var $chkbx = $('<td class="SelectedItemCHKBX"><input type="checkbox" id="SelectedItem" class="SelectedItem" /></td>');

    $row1.prepend($chkbx);
    $row1.appendTo('#SelectedForProcessing tbody');
    $('#UpdateDBRecs').show();
  });

  $('#CancelSelection').click(function() {
    $('.MatchedTransctions tbody tr').removeClass('highlighted');
    $('#ProcessList_btn').hide();
    $('#CancelSelection').hide();
  });

  $('.MatchedTransctions tbody tr').click(function(e) {

    $("#output").append("<p>row click</p>");

    $('.MatchedTransctions tbody tr').removeClass('highlighted');
    $(this).addClass('highlighted');

    $('#ProcessList_btn').show();
    $('#CancelSelection').show();
    $('.SelectedtItemCHKBX').removeAttr('checked');
  });
})

.highlighted {
  background-color: yellow;
}

#output {
  border: 1px solid #ccc;
}

p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="MatchedTransctions" class="MatchedTransctions">
  <table class="table">
    <thead>
      <tr>
        <th>
          Id
        </th>
        <th>
          Region
        </th>
        <th>
          Person
        </th>
      </tr>
    </thead>
    <tbody>
      <tr xxxonclick="toggleClass(this,'selected');">
        <td>
          1
        </td>
        <td>
          R1
        </td>
        <td>
          P1
        </td>
      </tr>
    </tbody>

    <tr xxxonclick="toggleClass(this,'selected');">
      <td>
        2
      </td>
      <td>
        R2
      </td>
      <td>
        P2
      </td>
    </tr>

  </table>
  <div>
  </div>
</div>

<button id="ProcessList_btn" style='display:none;'>
    Process
    </button>

<div id="SelectedForProcessingDuplicateID">
  <table class="table" id="SelectedForProcessing">
    <thead>
      <tr>
        <th>
          Select Record
        </th>
        <th>
          Id
        </th>
        <th>
          Region
        </th>
        <th>
          Person
        </th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<div id="output"></div>