Как отобразить скрытые строки таблицы с помощью переключателей с помощью JQuery - PullRequest
Новая
       39

Как отобразить скрытые строки таблицы с помощью переключателей с помощью JQuery

0 голосов
/ 02 февраля 2012

У меня есть несколько строк таблицы, в каждой из которых есть набор переключателей (Утвердить и отклонить). Когда я выбираю Отклонить, я хочу отобразить скрытый tr под ним, и я использую jquery для вставки HTML в tr. Когда я выбираю Подтвердить, tr должен быть скрыт еще раз.

Я не могу заставить его работать именно так, как я объяснил, когда я переключаюсь между переключателями Approve & Reject, скрытые 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();
       };
   });

1 Ответ

2 голосов
/ 02 февраля 2012

Вместо change используйте событие click и удалите эту строку $('.hiddenColumn').show(), которая является виновником.Просто покажите следующую строку, вызвав метод show только в той строке, которую вы уже нашли.Также вместо использования $(this).val() для получения значения, вы можете просто использовать this.value внутри обработчика.

...