MarcM MarcM - 1 year ago 67
CSS Question

Show/hide content of active row

In a bootstrap+jquery web page I build tables with this structure:

<table class="table table-striped" id="mytable"
<input type="text" name="quantity1" id="quantity1" class="hidden form-control" />
<input type="text" name="quantity2" id="quantity2" class="hidden form-control" />
<!-- ...and so on -->

I want to show the input quantityXY only if the row is active and keep the rest hidden.

I have this javascript to activate/deactivate rows:

$(document).ready(function() {
$( "#mytable tbody" ).on( "click", "tr", function() {
// Here show/hide row inner input fields

What should I do to hide/show inner 'input' for the active row? Not sure how to refer to it.
Something like $(this) > td > input ??

Answer Source

Why not doing it in css? like

#mytable tbody tr input {
    display: none;
#mytable tbody input {
    display: inline;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download