使用 JavaScript 激活 td 按钮答案

【问题标题】：Activating td button using JavaScript使用 JavaScript 激活 td 按钮
【发布时间】：2019-05-25 20:38:31
【问题描述】：

我有以下函数，用于从表中的父行展开和折叠子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 回答），但是我只使用 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>

【问题讨论】：

Laurie 我注意到你有一个提交，但没有表格。您是否考虑过使用 AJAX 使用 Javascript 将数据发回？如果您要使用传统的表单提交，则需要在输入中捕获数据。
嗨，Paul，我的示例中包含表单元素，请查找它已更新。我不确定 AJAX 是否可以工作，因为我正在使用 Python Flask 作为后端。我想要的只是当用户单击一行时，该行的 ID 被发送到 Flask，以便可以更新该行所属的 SQL 表（无需刷新页面）。
好的，您的表单将本机处理提交。但它会回帖。即刷新页面。避免这种情况的方法是 AJAX，这甚至可以是一个带有参数的 url 的空白 POST。例如/myurl/mypage?tblID=123
谢谢，我现在还要学一件事！
看看这里。 api.jquery.com/jquery.post 虽然你真的不需要 jQuery 来做这些。

标签： javascript html onclick

【解决方案1】：

要回答如何通过点击tr 在td 中触发button 的具体问题：

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

可以通过给按钮一个类来改进（以防您将来添加其他按钮），例如：

<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() - 但在 cmets 中指出的代码中没有表单，因此在这里使用 ajax 调用似乎比提交表单更合适。

最后，考虑使用类而不是直接将 css 设置为添加/删除类，这在 jquery 中非常简单，例如为您的 tr 点击事件添加：

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

【讨论】：

再次感谢朋友的帮助，非常感谢。