我怎么可以处理只能使用jQuery高亮显示的行？

问题描述 投票：0回答：1

所以我在我追加到上一行点击其它表的表列表或记录。所以，当我点击一个排它得到强调，我可以将它添加到另一个表。问题是，appendTo功能我有断行click事件的作品，但我想只处理突出显示的行....目前，如果我点击一个行，然后单击另一行，将两排哪怕只处理一个排在我的表高亮显示。

下面是jQuery函数用2个表：

        $(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
1个回答
0
投票

目前，如果我点击一个行，然后单击另一行会处理两排

正在发生的事情是，当你单击行，你添加一个新的事件处理程序克隆该行（上单击过程）。然后，单击另一行，并将其添加另一个事件处理程序，以克隆新选定的行。

当您单击的过程，它同时运行事件处理程序和副本都行。

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

你有两个选择：

  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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.