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 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) に唯一のハンドラーが配置されます。ユーザーが をクリックするtrと、イベントが処理される に到達するまで、イベントが DOM ツリーをバブルアップしますtable。

trポーリングせずにその数の を最新の状態に保ちたい場合は、ミューテーション イベントを調べることができます: 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 に答える