javascript - Jquery，在一个表中选择几个TR

Question

我有一个包含多行的 html 表格 - 对于这个例子来说，假设是 17 行。在第 2、9 和 15 行，我有一些粗体文本，它们基本上是其后各行的标题。我使用以下代码在每个 header 后添加一个图像:

$("#tblResults tr.lGreyBG td span.gridTXT b").each (function(index) {
    $(this).after("&nbsp;<img class='ChartButton' id='c"+ index +"'src='Images//chart_bar.png' alt='Chart' width='20' />");                 
});

我还有以下代码将点击事件绑定(bind)到每个图表按钮。

$("img.ChartButton").click(function(){
    alert ($(this).attr("id")); // THIS LINE WILL BE REPLACED
});

目前，它只显示图表按钮的 ID。我需要做的是替换警报以拉回被单击的标题行之后的行，直到下一个标题行，直到表的末尾(以先到者为准)。因此，如果单击第一个按钮，则第 3 行到第 8 行将被拉回。一旦我有了这些，我就可以遍历每个 TD 单元格以查看表中的数据。

非常感谢您对我需要使用哪些“选择器”来拉回正确行的任何帮助。另请注意，这需要是动态的，因为其他表将具有不同的行数。

谢谢 H

Answer 1

如果有一组行属于一起，我的第一直觉是声明帮助我一次选择所有行的类，例如

<tr class="group-1"> ... </tr>
<tr class="group-1"> ... </tr>
<tr class="group-2"> ... </tr>
<tr class="group-2"> ... </tr>
...

或者像 Tomalak 所建议的那样使用多个 thead 和 tbodies。

如果这不可能，并且您想使用 jQuery 执行此操作，您可以使用 nextAll() 选择标题后的所有行。 .您只需过滤掉下一个标题之后的所有行。

var nextBlockAndTheRest = $(this). // create jQuery object out of this img
                            closest("tr"). // find the parent tr
                            nextAll("tr.lGreyBg"). // find all next lGreyBg rows
                            first("td span.gridTXT b"). // find the first with b
                            nextAll(). // select all following rows
                            andSelf(); // add the row with b

var thisBlock = $(this). // create jQuery object out of the img
              closest("tr"). // find the parent tr
              nextUntil("td span.gridTXT b"). // select everything after the tr
              andSelf(). // add the current block heading
              not(nextBlockAndTheRest); // remove all the rest of the rows

jsFiddle