Question

我有一个有几行的html表 - 对于这个例子我们说17。在第2行，第9行和第15行，我有一些BOLD文本，基本上是后面行的标题。我已使用以下代码在每个标题后添加IMAGE：

$("#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' />");                 
});

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

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

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

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

由于 ħ

Answer 1

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

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

或者Tomalak建议的多个theads和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

Answer 2

// notice that use after() directly, without each()
$("#tblResults tr.lGreyBG td span.gridTXT b").after(function (index) {
    return "<img class='ChartButton' id='c"+ index +"'src='Images//chart_bar.png' alt='Chart' width='20' />";
});

$("#tblResults").delegate("img.ChartButton", "click", function () {
  var currentRows = $(this).closest("tr").nextUntil("tr:has(span.gridTXT b)");
});

BTW：如果你的桌子有多个头部和身体，你绝对应该考虑使用多个<thead>和<tbody>标签的更多语义标记。

$("#tblResults thead span.gridTXT b").after(function (index) {
    return "<img class='ChartButton' id='c"+ index +"'src='Images//chart_bar.png' alt='Chart' width='20' />";
});

$("#tblResults").delegate("img.ChartButton", "click", function () {
    var currentRows = $(this).closest("thead").next("tbody").find("tr");
});

修改：更改了使用nextUntil()的答案。

Jquery，在表中选择几个TR

2 个答案: