Binding Click Event zu td vs Tabelle

Ich möchte Excel wie Dienstprogramm in HTML erstellen. Angenommen, ich habe eine Tabelle [id "myTbl"] mit 20 Zeilen & 20 Spalten. Ich möchte Textbox in td hinzufügen, wenn Benutzer es mit td Text als Wert anklickt.Binding Click Event zu td vs Tabelle

Angenommen, mein Tisch ist
alt text

Ich habe 2 Möglichkeiten, dieses [beide arbeiten gut]

Option I

$("#myTbl").bind("click",function(e){ 
    var obj = e.target; 
    if(obj.nodeName == "TD"){ 
     $(obj).html("<input type='text' value='"+$(obj).html()+"'></input>"); 
    } 
});

Option II

$("#myTbl tr td").bind("click",function(e){ 
    if($("input",$(this)).length==0){ 
     $(this).html("<input type='text' value='"+$(this).html()+"'></input>"); 
    } 
});

zu erreichen

Meine Frage ist whi ch-Option ist besser in Bezug auf die Leistung.

Quelle

2010-12-02 Chinmayee G

Warum nicht Textbox in allen Zellen im Voraus dann versteckt zu haben anzuzeigen/es auf Klick verstecken und Unschärfe? –

Aber das wird meine Seitengröße erhöhen. Es ist auch nicht notwendig, dass der Benutzer auf jeden td klickt. Recht? –

das ist richtig, aber Sie gefragt, über die Leistung .. mit moderner Bandbreite mit wenigen zusätzlichen Kilobyte wird keine sichtbaren Auswirkungen auf die Seitenladezeit haben. :) –

Die erste der beiden Optionen erstellt nur einen Event-Handler, der also leistungsfähiger ist. Das Erhalten des Ziels über das Ereignis, wie Sie es tun, hat vernachlässigbare Kosten.

es die ‚jQuery‘ Art und Weise zu tun, möchten Sie vielleicht delegate verwenden:

$("#myTbl").delegate("td", "click", function() { 
    var $this = $(this); 
    $this.html("<input type='text' value='"+$this.text()+"'></input>"); 
});

Quelle

2010-12-02 07:45:02 sje397

schlag mich zum Schlag. Es sollte beachtet werden, dass die Delegate-Methode in 1.4.2 hinzugefügt wurde, also müssen Sie die neuesten Sachen verwenden. –

Macht dieser Code dasselbe wie das Erstellen von Event-Handlern für jedes 'td'? Warum ist es auch der "jQuery" Weg? –

Nein, es wird nur ein Ereignishandler erstellt. Es ist der 'jQuery-Weg', da dies eine jQuery-Funktion ist, die genau für diesen Zweck gedacht war; Es handhabt die Event-Ziellogik usw. für Sie (der Kontext der Handler-Funktion ist das 'td'-Element). – sje397

Ich würde sagen, dass die Bindung an die Tabelle ist viel besser, weil Sie nicht den zusätzlichen Aufwand für die Wartung aller Click-Handler für jede Zelle haben.

Quelle

2010-12-02 07:43:50

Binding Click Event zu td vs Tabelle

Antwort

Verwandte Themen