0

我有一个简单的表格，有 1 行开始。

<table>
    <tr id="tr1">
        <td>ROW 1</td>
        <td>ROW 1</td>
    </tr>
</table>

每个都tr监听一个点击事件。单击表格行后，我想获得表格中的行数，而不必不断地重新查询它。jQuery 是否在某处存储了当前的集合，tr's如果是，我如何访问它？

$("table").on("click", "tr", function(e){

    $("#output").html("click on row with id " + $(this).attr("id") + "<br>")

        $("#output").append("Number of rows" + $("table").find("tr").size())
        // instead of "live" requerying $("table").find("tr") is there another way to get to all tr's

});

// more code...

$("table").append("<tr id='tr2'><td>ROW 2</td><td>ROW 2</td></tr>");

编辑：要清楚，获取行数只是一个例子。我实际上还需要对集合执行其他操作

请参阅此处的示例：http: //jsfiddle.net/Flandre/Ed4pp/2/

4

4 回答 4

1

简短回答否，没有实时查询来维护表的长度。

由于它是一个动态表，您可以在其中添加行/删除行，因此您必须重新查询

$("table").find("tr").length //(note not size()).

如果未将其设置为处理程序外部的 var 并在添加/删除行时更新它。

var rowCount = $("table").find("tr").length;
$("table").on("click", "tr", function(e) {
    $("#output").html("click on row with id " + $(this).attr("id") + "<br>")
    $("#output").append("Number of rows" + rowCount);

});


function addRow() {
    // add a row to the table
    $("table").append("<tr id='tr2'><td>ROW 2</td><td>ROW 2</td></tr>");
    rowCount++; //Manually :P
}

addRow();

演示

于 2012-05-11T21:50:03.147 回答
0

尝试：

$("table tr").on("click", function(e){

代替：

$("table").on("click", "tr", function(e){

和这个：

$("#output").append("Number of rows" + $("table").find("tr").size())

应该：

$("#output").append("Number of rows" + $("table tr").length)
于 2012-05-11T21:50:32.303 回答
0

我不相信 jQuery 会跟踪这些事情。当您使用委托事件处理程序时，唯一的处理程序放置在选定元素 ( table) 上。当用户单击 atr时，事件会在 DOM 树中冒泡，直到到达table处理事件的位置。

如果您想在tr不进行轮询的情况下保持该数量的 s 最新，您可以查看突变事件：http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events。 html#Events-MutationEvent

这是一个插件，不知道它是否有什么好处：https ://github.com/jollytoad/jquery.mutation-events

于 2012-05-11T21:50:51.523 回答
0

我会这样做：http: //jsfiddle.net/mkjkm/

var table = $("table")[0];
$(table).on("click", "tr", function(e) {

    $("#output").html("click on row with id " + this.id + "<br>")

    $("#output").append("Number of rows" + table.rows.length)
    $(table).append("<tr id='tr" + (table.rows.length + 1) + "'><td>ROW " + (table.rows.length + 1) + "</td><td>ROW " + (table.rows.length + 1) + "</td></tr>");
});

DOM 将给定表中所有行的集合保存在表的 DOMElement 上。

于 2012-05-11T21:53:14.003 回答