如何使用JQuery顯示帶單選按鈕的隱藏表格行

Question

我有多行表格行，每行有一組單選按鈕（批准&拒絕）。當我選擇Reject時，我想在它下面顯示一個隱藏的tr，並且我正在使用jquery將HTML插入到tr中。當我選擇批准時，應該再次隱藏tr。

我不能完全按照我解釋的方式工作，當我在Approved &拒絕單選按鈕之間切換時，隱藏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