如何使用JQuery使用单选按钮显示隐藏的表行 [英] How to display hidden table rows with radio buttons using JQuery

问题描述

我有多个表行，每行上都有一组单选按钮(批准和拒绝).当我选择拒绝时，我想在其下方显示一个隐藏的tr，并且正在使用jquery将HTML插入tr.当我选择批准时，tr应该再次隐藏.

I have multiple table rows that has a set of radio buttons on each row (Approve & Reject). When I select Reject I want to display a hidden tr underneath it and I'm using jquery to insert HTML into the tr. When I select Approve the tr should be hidden once again.

当我在批准与批准之间切换时，我无法使其完全按照我的解释工作.拒绝单选按钮，隐藏的tr会显示在所有行上.我希望它仅显示在我单击的单选按钮下方.

I can't get it to work exactly how I explained it, when I toggle between the Approve & Reject radio buttons the hidden tr gets displayed on all the rows. I want it to only show underneath the radio button I clicked on.

我的小提琴: http://jsfiddle.net/4A7TD/

HTML:

<table>
  <tr>
    <td class="left">
        <input type="radio" name="approval1" value="approve" /> APP &nbsp; 
        <input type="radio" name="approval1" value="reject" /> REJ
    </td>
 </tr>
 <tr class="hiddenColumn">

 </tr>
 <tr>
    <td class="left">
        <input type="radio" name="approval2" value="approve" /> APP &nbsp;
        <input type="radio" name="approval2" value="reject" /> REJ
    </td>
 </tr>
 <tr class="hiddenColumn">

 </tr>
</table>

jQuery:

    $('.hiddenColumn').hide();

    $('input[type=radio]').change(function() {
     if ($(this).val() == 'reject') {
       $('.hiddenColumn').show();
       var showColumn = ($(this).closest('tr').next('tr'));
       showColumn.html('<td class="left">*Reason for Rejection<br /><textarea class="width350" name="reasonForRejection"></textarea></td>');
        } else if ($(this).val() == 'approve') {
            ($(this).closest('tr').next('tr')).hide();
       };
   });

推荐答案

使用click事件代替change并删除此行$('.hiddenColumn').show()，这是罪魁祸首.仅通过在已找到的那一行上调用show方法来显示下一行.同样，除了使用$(this).val()获取值之外，您还可以在处理程序内部使用this.value.

Instead of change use click event and remove this line $('.hiddenColumn').show() which is the culprit. Just show the next row by calling show method only on that row which you have already found. Also instead of using $(this).val() to get the value, you can just use this.value inside the handler.

   $('input[type=radio]').click(function() {
     var $nextTR = $(this).closest('tr').next('tr');
     if (this.value == 'reject') {
       $nextTR
       .html('<td class="left">*Reason for Rejection<br /><textarea class="width350" name="reasonForRejection"></textarea></td>')
       .show();
     } 
     else if (this.value == 'approve') {
        $nextTR.hide();
     };
   });

演示

Demo

这篇关于如何使用JQuery使用单选按钮显示隐藏的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！