我有这个小提琴:http: //jsfiddle.net/2nAEZ/3/
这个想法很简单......当页面显示时,标签内的所有元素都被隐藏了。除了“回复”按钮。
单击“回复”按钮后,将出现带有“取消”按钮的表单。
但是,如何使“回复”按钮适用于每一行?单击回复按钮时,并非所有表单都会显示。谢谢你。
我有这个小提琴:http: //jsfiddle.net/2nAEZ/3/
这个想法很简单......当页面显示时,标签内的所有元素都被隐藏了。除了“回复”按钮。
单击“回复”按钮后,将出现带有“取消”按钮的表单。
但是,如何使“回复”按钮适用于每一行?单击回复按钮时,并非所有表单都会显示。谢谢你。
试试这个jsFiddle 示例。我清理了您的 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>
</p>
不能有多个具有相同 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();
});
同一个类可以有多个元素。
如果你想独立控制每一个,你可能想要这样做:
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 来控制第二种形式。