Блог

Главная - Вопросы по программированию - как выделить строку при щелчке мыши?

как выделить строку при щелчке мыши?

#javascript #jquery

Вопрос:

У меня есть таблица со строками данных. Я могу выделить таблицу, когда установлен флажок. Я хотел бы включить подсветку и включить флажок при щелчке мыши по таблице. проблема с моим кодом сейчас в том, что, когда я нажимаю на флажок, он запускает событие для щелчка мыши, так как флажок является частью того <tr> , как я могу это исправить.

 $('.form-check-input').on('click', function() {
  if ($(this).is(':checked')) {
    $(this).closest("tr").addClass("rowColor");
  } else {
    $(this).closest("tr").removeClass("rowColor");
  }
});
$('#table1 tbody tr').on('click', function() {
  //$(this).find(".form-check-input").checked = true;
  var checkBox = $(this).find(".form-check-input");
  if (checkBox.is(':checked')) {
    checkBox.attr("checked", false);
    $(this).removeClass("rowColor");
  } else {
    checkBox.attr("checked", true);
    $(this).addClass("rowColor");
  }
}); 
 .rowColor {
  background-color: #dfecf6;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
  //thead
  <tbody>
    <tr class="">
      <td></td>
      <td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
    </tr>
  </tbody>
  <table>

Ответ №1:

Проблема с приведенным выше кодом заключается в том, что при нажатии флажка он также вызывает событие щелчка родительского элемента. вы можете остановить это, вызвав stopPropagation() событие. вот обновленный код

 $('.form-check-input').on('click', function(e) {
  e.stopPropagation();
  if ($(this).is(':checked')) {
    $(this).closest("tr").addClass("rowColor");
  } else {
    $(this).closest("tr").removeClass("rowColor");
  }
});
$('#table1 tbody tr').on('click', function() {
  $('.form-check-input').trigger("click"); 
  return;
}); 
 .rowColor {
  background-color: #dfecf6;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
  //thead
  <tbody>
    <tr class="">
      <td>test</td>
      <td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
    </tr>
  </tbody>
  <table>

Ответ №2:

У вас было два события, перекрывающих друг друга, потому checkbox что щелчок переходил в tr щелчок. Я добавил e.stopPropagation(); , чтобы этого не случилось.

 $('.form-check-input').on('click', function(e) {
  e.stopPropagation();
  if ($(this).is(':checked')) {
    $(this).closest("tr").addClass("rowColor");
  } else {
    $(this).closest("tr").removeClass("rowColor");
  }
});
$('#table1 tbody tr').on('click', function() {
  //$(this).find(".form-check-input").checked = true;
  var checkBox = $(this).find(".form-check-input");
  if (checkBox.is(':checked')) {
    checkBox.attr("checked", false);
    $(this).removeClass("rowColor");
  } else {
    checkBox.attr("checked", true);
    $(this).addClass("rowColor");
  }
}); 
 table {
  width: 100%
}
.rowColor {
  background-color: #dfecf6;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
  //thead
  <tbody>
    <tr>
      <td>amp;nbsp</td>
      <td class="checkboxtd">
        <input class="form-check-input" type="checkbox" value="" id="">
       </td>
    </tr>
  </tbody>
 </table>

Ответ №3:

Прежде всего, еще кое — что о вашем коде:

  • вы должны использовать checkBox.prop("checked", false); , а не .attr устанавливать текущее состояние флажка.
  • обычно вы хотите прослушать change (или input ) событие на входном элементе, если хотите получать уведомления об изменении a click . Флажок также можно установить/снять с помощью других устройств ввода, таких как клавиатура.

Для решения вашей проблемы существуют различные способы решения проблемы.

Моим первым и настоятельно рекомендуемым решением было бы переписать логику вашего кода: я бы выбрал только изменение отмеченного состояния флажка в обработчике tr событий, а затем запуск change события на флажке.

 $('.form-check-input').on('change', function(e) {
  if ($(this).is(':checked')) {
    $(this).closest("tr").addClass("rowColor");
  } else {
    $(this).closest("tr").removeClass("rowColor");
  }
});

$('#table1 tbody tr').on('click', function(e) {
  var checkBox = $(this).find(".form-check-input");
  if (!$(e.target).is(checkBox)) {
    // toggle the check state
    checkBox.prop("checked", !checkBox.is(':checked'));
    // trigger the change event
    checkBox.trigger("change")
  }
}); 
 .rowColor {
  background-color: #dfecf6;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
  //thead
  <tbody>
    <tr class="">
      <td></td>
      <td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
    </tr>
  </tbody>
  <table>

Если вы действительно хотите сохранить свой код таким образом — что я не буду предлагать по вышеупомянутой причине-вы могли бы использовать способ предотвращения распространения события в обработчике click событий input элемента, чтобы оно не достигло tr элемента.

 $('.form-check-input').on('click', function(e) {
  e.stopPropagation()

  if ($(this).is(':checked')) {
    $(this).closest("tr").addClass("rowColor");
  } else {
    $(this).closest("tr").removeClass("rowColor");
  }
});

$('#table1 tbody tr').on('click', function(e) {
  //$(this).find(".form-check-input").checked = true;
  var checkBox = $(this).find(".form-check-input");

  if (checkBox.is(':checked')) {
    checkBox.prop("checked", false);
    $(this).removeClass("rowColor");
  } else {
    checkBox.prop("checked", true);
    $(this).addClass("rowColor");
  }
}); 
 .rowColor {
  background-color: #dfecf6;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
  //thead
  <tbody>
    <tr class="">
      <td></td>
      <td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
    </tr>
  </tbody>
  <table>

Другим способом было бы проверить в обработчике событий tr элемента click , возникло ли событие из input элемента, используя $(e.target).is(checkBox) . Таким образом, вы также можете изменить прослушиватель событий на прослушивание change вместо click флажка. Но я бы тоже не рекомендовал этого делать.

 $('.form-check-input').on('change', function(e) {
  if ($(this).is(':checked')) {
    $(this).closest("tr").addClass("rowColor");
  } else {
    $(this).closest("tr").removeClass("rowColor");
  }
});

$('#table1 tbody tr').on('click', function(e) {
  //$(this).find(".form-check-input").checked = true;
  var checkBox = $(this).find(".form-check-input");
  if (!$(e.target).is(checkBox)) {
    if (checkBox.is(':checked')) {
      checkBox.prop("checked", false);
      $(this).removeClass("rowColor");
    } else {
      checkBox.prop("checked", true);
      $(this).addClass("rowColor");
    }
  }
}); 
 .rowColor {
  background-color: #dfecf6;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
  //thead
  <tbody>
    <tr class="">
      <td></td>
      <td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
    </tr>
  </tbody>
  <table>

Ответ №4:

Я думаю, что вы можете внести несколько изменений, не стесняйтесь посещать мое решение в CodePen: https://codepen.io/juanmaescudero/pen/PojQKzm

В любом случае я поделюсь с вами кодом:

HTML:

 <table id="table1" class="table table-striped">
  <tbody>
    <tr class="">
      <td>highlight row</td>
      <td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
    </tr>
  </tbody>
 <table>

CSS:

 .rowColor {
  background-color: #dfecf6;
}

JS:

 $(".form-check-input").on("click", (e) => {
  e = e.target;
  if ($(e).is(":checked")) {
    $(e.closest("tr")).addClass("rowColor");
  } else {
    $(e.closest("tr")).removeClass("rowColor");
  }
});

Привет 😁

Метки: