Показать содержимое/скрыть активной строки

Question

В веб-странице бутстраповской + Jquery я построить таблицы с этой структурой:

<table class="table table-striped" id="mytable" 
    <tbody> 
     <tr> 
      <td>Id1</td><td>Description1</td> 
      <td> 
       <input type="text" name="quantity1" id="quantity1" class="hidden form-control" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Id2</td><td>Description2</td> 
      <td> 
       <input type="text" name="quantity2" id="quantity2" class="hidden form-control" /> 
      </td> 
     </tr>  
     <!-- ...and so on --> 
    </tbody> 
</table> 

Я хочу, чтобы показать вход quantityN только если строка является активным и держать остальные скрыты.

У меня есть этот JavaScript для активации/деактивации строки:

$(document).ready(function() { 
    $("#mytable tbody").on("click", "tr", function() { 
     $(this).addClass('active').siblings().removeClass('active'); 
     // Here show/hide row inner input fields 
    }); 
}); 

Что я должен сделать, чтобы скрыть/показать внутреннее «вход» для активной строки? Не знаете, как обращаться к нему. Что-то вроде $ (this)> td> input ??

Answer 1

Почему бы не сделать это в css? как

#mytable tbody tr input { 
    display: none; 
} 
#mytable tbody tr.active input { 
    display: inline; 
} 

Answer 2

Вы можете использовать CSS:

#mytable tbody tr input { 
    visibility: hidden; 
} 

#mytable tbody tr.active input { 
    visibility: visible; 
} 

Answer 3

Если вы хотите, чтобы показать/скрыть на каждом щелчке тр а затем проверить, если на кнопку он активен или нет, и показать/скрыть свой вклад?

$(document).ready(function() { 
     $("#mytable tbody").on("click", "tr", function() { 
      if($(this).hasClass('active')) 
      { 
       $(this).removeClass('active'); 
       $(this).find('input').removeClass('active'); 
      } 
      else 
      { 
      $(this).addClass('active'); 
      $(this).find('input').addClass('active'); 
      } 
     }); 
}); 

Answer 4

Ваш код отлично работает. Добавляйте эти строки только в css.

tr input{ 
     display:none; 
    } 
    tr.active input{ 
     display:block; 
    } 

Answer 5

Может быть реализован с кодом jQuery также с небольшим добавлением.

$(document).ready(function() { 
    $("#mytable tbody").on("click", "tr", function() { 
     $(this).addClass('active').siblings().removeClass('active'); 
     // Here show/hide row inner input fields 
     $("#mytable tbody tr td input").addClass('hidden'); 
     $(this).find('input').removeClass('hidden'); 

    }); 
}); 

Heres ссылка: https://jsfiddle.net/mkLw6331/3/

Answer 6

Используйте этот код может быть работа для вас:

$(document).ready(function() { 
    $("#mytable tbody").on("click", "tr", function() { 
     $(this).addClass('active').siblings().removeClass('active'); 
     $(this).find("input").toggle(); 
    }); }); 

И Успехов