jquery - 显示/隐藏事件行的内容

Question

在 bootstrap+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>

我只想在该行处于事件状态时显示输入数量 N，并隐藏其余部分。

我有这个 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;
}