Можно ли щелкнуть строку таблицы, а также нажать кнопку строки?

Question

У меня есть строки таблицы с различными <td>.Одним из них является кнопка.

Я хочу, чтобы я мог щелкнуть в любом месте строки, чтобы сделать нажатие кнопки с помощью jquery.Кроме того, ряд должен стать зеленым.

В настоящее время у меня есть это:

$(".table tr").on('click', function(event) {
  $(this).toggleClass('highlighttask');
  $('button[name="checkbtn"]').click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>click</td>
    <td>
      <form method="POST" action="main.php" value="<?php echo $zeile['id']; ?>">
        <button type="submit" name="checkbtn">                                          
      Check
      </button>
        <input type="hidden" name="id" value="<?php echo $zeile['id']; ?>">
      </form>
    </td>
  </tr>
</table>

Если я использую $('button[name="checkbtn"]').click();

Я получаю эту ошибку> Uncaught RangeError: Максимальный размер стека вызовов превышен

Answer 1

Вам нужно остановить событие нажатия кнопки, запускающее событие tr click, так как это вызовет цикл, который выдаст ошибку превышения максимального размера стека вызовов

$(".table tr").on('click', function(event) {
  $(this).toggleClass('highlighttask');
  $('button[name="checkbtn"]').click();
});

$('button[name="checkbtn"]').on('click', function(event) {
    event.stopPropagation();  // stop click bubbling up to parent
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>click</td>
    <td>
      <form method="POST" action="main.php" value="<?php echo $zeile['id']; ?>">
        <button type="submit" name="checkbtn">                                          
      Check
      </button>
        <input type="hidden" name="id" value="<?php echo $zeile['id']; ?>">
      </form>
    </td>
  </tr>
</table>

Дополнительная информация о e.stopPropagation