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）＆gt; td＆gt;输入??

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

如果您想在每次点击tr时显示/隐藏，请检查点击它是否有效并显示/隐藏其输入？

from itertools import izip
string = 'adflkja;dgkhkadjhgkasdhfkjahdflasdjf'
def grouped(iterable, n):
    "s -> (s0,s1,s2,...sn-1), (sn,sn+1,sn+2,...s2n-1), (s2n,s2n+1,s2n+2,...s3n-1), ..."
    return izip(*[iter(iterable)]*n)

for x in grouped(string,3): 
    print ''.join(x)

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');

    });
});

下面是链接：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();
    }); });

祝你好运

显示/隐藏活动行

6 个答案: