Активация кнопки td с помощью JavaScript

Question

У меня есть следующая функция, которая используется для раскрытия и сжатия дочерних tr строк из родительских строк в таблице, а также изменяет стиль текста tr на обычный:

$( document ).ready(function() {
     $('.parent').on('click', function(){
          $(this).next('.child').toggle();
          $(this).css('font-weight', 'normal');

          <<< ADD COMMAND TO TOGGLE BUTTON HERE >>>
     });
 });

У меня также есть следующая скрытая кнопка в каждом tr, которую я хочу отправить при нажатии tr:

<button type="submit" name="read-button" formmethod="POST" value="{{ message.message_id }}" style="display: none;"></button>

Какую команду следует включить вместе с функцией JavaScript, чтобы добитьсяэтот?Я полагаю, что это будет одно из следующих действий (предоставлено this answer), однако я использую JS только несколько дней, поэтому я не уверен, как включить их в мой код:

document.getElementById('read-button').submit();
changeAction('read-button','loginForm');
document.forms['read-button'].submit();

Пример HTML:

<form method=['POST']>
<table>
    <tr class="parent">
         <td>
             <button type="submit" name="read-button" formmethod="POST" value="{{ message.message_id }}" style="display: none;"></button>
             <a>Heres a cell</a>
         </td>
         <td>
             <a>
                Heres one more cell
             <a>
         </td>
    </tr>
    <tr class="child">
         <td>
             <a>
                Some hidden info
             </a>
         </td>
         <td>
             <a>
                More hidden info
             </a>
         </td>
    </tr>
<table>
</form>

Answer 1

Чтобы ответить на конкретный вопрос о том, как вызвать button в пределах td, щелкнув tr:

$('.parent').on('click', function() {
    $(this).find("button").click();

, который можно улучшить, назначив кнопке класс (incaseвы добавите дополнительные кнопки в будущем), например:

<button class='readbutton' ..`

затем

$('.parent').on('click', function() {
    $(this).find("button.readbutton").click();  

---

В этом сценарии кажется, что вам не нужна скрытая кнопка, поскольку вы можетевызовите функции скрытой кнопки напрямую.

Вместо:

$("button").click(handleClick);

используйте

$('.parent').on('click', function() {
    .. other functionality ...
    handleClick();

, поскольку вы новичок в js, обратите внимание на разницу междуhandleClick и handleClick() - при () она вызывает функцию, без передачи ее в качестве переменной функции.

$("button").click(handleClick);

совпадает с

$("button").click(function() { handleClick(); });

---

Если вы пытаетесь отправить форму, вы должны использовать $(form).submit() - но в коде нет формы, как указано в комментариях, и вызов ajax может показаться более подходящим, чем отправка формы.

---

Наконец, рассмотрите возможность использования классов, а не установки CSS непосредственно как добавление / удаление классовэто довольно просто в jquery, например, для вашего tr события click добавьте:

$(this).addClass("selected").siblings().removeClass("selected");