jQuery Toggle 在 HTML 表格中显示/隐藏表单答案

【问题标题】：jQuery Toggle Show / Hide Form Inside HTML TablejQuery Toggle 在 HTML 表格中显示/隐藏表单
【发布时间】：2012-08-10 18:41:37
【问题描述】：

我有这个小提琴：http://jsfiddle.net/2nAEZ/3/

这个想法很简单......当页面显示时，标签内的所有元素都被隐藏了。除了“回复”按钮。

单击“回复”按钮后，表单将显示“取消”按钮。

但是，如何让“回复”按钮在每一行都有效？单击回复按钮时，并非所有表单都会显示。谢谢。

【问题讨论】：

标签： jquery

【解决方案1】：

试试这个jsFiddle example。我清理了您的 HTML（没有重复 ID）并更改了 jQuery 以在每行的基础上运行。

jQuery

$("form, .hide").hide();
$(".show").click(function() {
    $(this).parents('tr').find("form,.hide").show();
    $(this).parents('tr').find(".show").hide();
});
$(".hide").click(function() {
    $(this).parents('tr').find("form, .hide").hide();
    $(this).parents('tr').find(".show").show();
});

HTML

<table><tr>
    <td>12345</td>
    <td>message here<br>
        <form action="" method="post">
        <textarea></textarea>
        <input type="button" value="Send">
        </form></td>
    <td>
        <button class="hide">Cancel</button>
        <button class="show">Reply</button>
    </td>
</tr>
<tr>
    <td>67890</td>
    <td>another message here<br>
        <form action="" method="post">
        <textarea></textarea>
        <input type="button" value="Send">
        </form></td>
    <td>
        <button class="hide">Cancel</button>
        <button class="show">Reply</button>
    </td>
</tr></table>

【讨论】：

【解决方案2】：

您不能有多个具有相同 ID 的元素！由于您的表单是由 PHP 生成的，

<button class="hide" data-form="<?=$form_number?>">Cancel</button>
<button class="show" data-form="<?=$form_number?>">Reply</button>

那么，

$("form, .hide").hide();
$(".show").click(function(){
   formnum = $(this).data("form");
   $("form"+formnum+", .hide").show();
   $('.show[data-form="'+formnum+'"').hide();
});

$(".hide").click(function(){
   formnum = $(this).data("form");
   $("form"+formnum+", .hide").hide();
   $('.show[data-form="'+formnum+'"').show();
});

同一个类可以有多个元素。

【讨论】：

兄弟，当我点击回复按钮时，两个表单都会出现。那就是问题所在。如何使表单与只出现的回复按钮相关联？
是的，我意识到了，给我一分钟
用PHP动态生成
现在试试，编辑代码，$form_number 是当前编号。 PHP 打印出来的形式。

【解决方案3】：

如果您想独立控制每一个，您可能需要这样做：

js:

$(document).ready(function(){
    $("form, #hide").hide();

    $("#show1").click(function(){
    $("#form1, #hide1").show();
    $("#show1").hide();
    });

    $("#hide1").click(function(){
    $("#form1, #hide1").hide();
    $("#show1").show();
    });
});

html:

<tr>
    <td>12345</td>
    <td>message here<br>
        <form id="form1" action=\"\" method=\"post\">
        <textarea></textarea>
        <input id="reply1" type="button" value="Send">
        </form></td>
    <td>
        <button id="hide1">Cancel</button>
        <button id="show1">Reply</button>
    </td>
</tr>
<br>
<tr>
    <td>67890</td>
    <td>another message here<br>
        <form id="form2" action=\"\" method=\"post\">
        <textarea></textarea>
        <input id="reply2" type="button" value="Send">
        </form></td>
    <td>
        <button id="hide2">Cancel</button>
        <button id="show2">Reply</button>
    </td>
</tr>

你需要额外的js来控制第二种形式。

【讨论】：

j08691 的答案比这更干净。去吧。