MarcM MarcM - 14 days ago 9
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"
<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>


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() {
$(this).addClass('active').siblings().removeClass('active');
// 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

Why not doing it in css? like

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