javascript - 在javascript中选择特定表格元素的最聪明的方法是什么？

Question

我有一张桌子，上面有隐藏的行，就像这样

 -visible-
 -invisible-
 -visible-
 -invisible-

当我单击表格行时，我希望它显示不可见的行。目前我有使用这个功能：

var grid = $('#BillabilityResults');
$(".tbl tr:has(td)").click(
         function () {
             $(grid.rows[$(this).index()+1]).toggle();
         }

但是，如果我单击其中一个（现在可见的）隐藏行，该表也会隐藏可见行。我希望点击功能仅适用于特定的可见行。目前我所有的不可见行都有“偶数”类，所以我想我可以基于它来限制点击。但是，我似乎找不到向我的函数解释这一点的语法。我该怎么做呢？而且，更重要的是，有没有更好的方法来解决这个问题？

Answer 1

接下来使用：

$(".tbl tr:has(td)").click(
  function () {
    $(this).next().toggle();
  } 
);

而且，如果您有奇数或偶数的特定选择器：

$(".tbl tr.odd").click(
  function () {
    $(this).next().toggle();
  } 
);

但我认为对我的回答的主要帮助是使用 next() 让你进入下一行，而不是你正在做的索引过程。

Answer 2

var grid = $('#BillabilityResults');
$(".tbl tr:visible").click(
         function () {
             $(this).next('tr').toggle();
});

Answer 3

使用 NOT 函数忽略 EVEN tr 元素：

http://jsfiddle.net/7AHmh/

<table class="tbl">
<tr><td>one</td></tr>
<tr class="even" style="display:none"><td>two</td></tr>
<tr><td>three</td></tr>
<tr class="even" style="display:none"><td>four</td></tr>
</table>​

$(".tbl tr:has(td)").not("tr.even").click(function() {

    alert("Click triggered.");

    $(this).next("tr").show(); 

});

Answer 4

我想您可以在调用切换代码之前使用模运算符检查偶数/奇数行：

function() { // your anonymous function
    if (rowNumber % 2 == 0) { // only even rows get through here
        // toggle code here
    }
}

我希望它有所帮助。