jQuery：显示/隐藏表格行

Question

我试图通过为 tr 元素的 class 属性分配一个数字 id 来显示隐藏表行

我已对其进行了编码，以便显示此编号 id 的第一个实例，而其余的则隐藏。单击第一个实例应该会显示具有相同 ID 的其余行。

这是我到目前为止的代码，但是它无法显示其余的行：

以下代码在document.ready函数中

var ids = ["1","2","3","4","5","6","7","8","9","10"];

        var i;

        for (i = 0; i < ids.length; i++) {


             $("." + ids[i]).hide()

             $("." + ids[i] + ":first").show()

             $("." + ids[i] + ":first").click(function () {

                if( $("." + ids[i] + ":last").css('display') == 'none') {

                    $("." + ids[i]).show()

                } else {

                     $("." + ids[i]).hide()

                     $("." + ids[i] + ":first").show()

                }

            });


        }

html 只是

<tr class="<%= @current_id %>">
<td>test data</td>
<td>test data</td>
</tr>

Answer 1

你有很多错误：

$("." + ids[i] + ":first")
to
$("." + ids[i]).first()

然后

if( $("." + ids[i] + ":last").css('display') == 'none')

to 

if( $("." + ids[i]).last().is(':visible'))

然后使用";" 关闭所有方法：

$("." + ids[i]).show()

到

$("." + ids[i]).show();

.1 或 .2 等类也无效，您应该将其替换为 .1-row

那么，实际上您选择的是所有 tr 而不是 td 元素，您应该执行以下操作：

$("."+ids[i]).children('td').first().....ect /*this select the first td of the tr*/