Question

我有多个表行，每行都有一组单选按钮（Approve＆amp; Reject）。当我选择拒绝时，我想在它下面显示一个隐藏的tr，我正在使用jquery将HTML插入到tr中。当我选择批准时，应该再次隐藏tr。

当我在批准和批准之间切换时，我无法让它完全按照我解释的方式工作。拒绝单选按钮，隐藏的tr显示在所有行上。我希望它只显示在我点击的单选按钮下面。

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

如何使用JQuery显示带有单选按钮的隐藏表行

1 个答案: