JQueryを使用してラジオボタンで隠しテーブルの行を表示する方法

Question

各行にラジオボタンのセットを持つ複数のテーブル行があります（承認&拒否）。私が拒否を選択すると、その下に隠されたtrを表示したいと思い、jqueryを使用してtrにHTMLを挿入します。承認を選択すると、trは再び非表示になります。

Approve &拒否ラジオボタンと、すべての行に表示されている隠しtrが切り替わるときに、説明したとおりに動作させることができません。私はそれをクリックしたラジオボタンの下にだけ表示したい。

マイフィドル：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(); 
     }; 
    }); 

Answer 1

代わりのchange使用clickイベントと犯人であるこのライン$('.hiddenColumn').show()を削除してください。すでに見つかった行でshowメソッドを呼び出すだけで、次の行を表示するだけです。値を取得するのに$(this).val()を使用する代わりに、this.valueをハンドラ内で使用することもできます。

$('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