jQuery的顯示/隱藏表單中HTML表

Question

我有這樣的小提琴：http://jsfiddle.net/2nAEZ/3/

的想法很簡單......當頁面顯示了所有元素中的標籤是隱藏的。除了「回覆」按鈕。

一旦點擊「回覆」按鈕，窗體將顯示「取消」按鈕。

但是，如何使「回覆」按鈕適用於每一行？當點擊回覆按鈕時不會顯示所有表單。謝謝。

Answer 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> 

Answer 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(); 
}); 

你可以有相同的類多個元素。

Answer 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控制第二種形式。