✔ Performanceproblem bei einer großen Tabelle

B

BLR

Erfahrenes Mitglied
Hallo zusammen,

ich habe eine sehr große Tabelle, die auch über 1000 Zellen haben kann.
In fast jeder dieser Zelle (ausser da wo die Überschrift ist) ist zusätzlich ein input-feld, damit man in die Tabelle etwas eingeben kann.
Nach der Eingabe möchte ich diesen Wert auch speichern.
Dafür habe ich an jeden Input-Feld ein "onchange"-Event angehängt.
Bei Chrome funktioniert das einwandfrei.
Bei IE passiert folgendes:
1. Ich gebe etwas ein
2. Drücke TAB-Taste und warte erstmal fast eine Minute, bis er auf den nächsten Tabindex springt.
==>IE regagiert dann oft nicht und stürzt ab.

mein Code:



Code: 
// in der Schleife....


var meineZelle= document.createElement("td");    


tabellenZeile.appendChild(meineZelle);

inputField = document.createElement("input");

inputField.maxLength = 4;

inputField.id = cellId;
inputField.onchange = function(){


        saveInput(this); //an jede Zelle ein Event anhängen      

};

meineZelle.appendChild(inputField);

Wie könnte ich z.B einen Eventlistener für alle Zellen schreiben? (Es sei den, es würde die Performance steigern)

Danke für jeden Tipp.
 
Eine Möglichkeit wäre ein Event Delegation.

Ausgehend von diesen Ausschnitt
HTML: 
<table>
   <tbody id='table_body'>
      <tr>
         <td>
            <input type="text" />
         </td>
      </tr>
   <tbody>
</table>

Falls du ein JS Bibliothek nutzt, dann gibt es in vielen schon Funktionen, die so etwas übernehmen.
Hier z.B. ein Beispiel mit JQuery:
Javascript: 
$( "#table_body" ).delegate( "input", "change", function( event ) {
   saveInput( this ); //an jede Zelle ein Event anhängen
});
http://api.jquery.com/delegate/

oder mit Mootools:
Javascript: 
$('table_body').addEvent('change:relay(input)', function( event, target ) {
   saveInput( target ); //an jede Zelle ein Event anhängen
});
https://mootools.net/core/docs/1.6.0/Element/Element.Delegation

Falls du kein Bibliothek nutzt ist es etwas schwieriger, aber da gibt es trotzdem eine Möglichkeit.
Javascript: 
var tbody = document.querySelector("#table_body");
tbody.addEventListener("change", function(e) {
  saveInput( e.target ); //an jede Zelle ein Event anhängen
});
https://codepen.io/32bitkid/post/understanding-delegated-javascript-events

Alle Code-Schnipsel sind ungetestet von daher kann es sein, dass es nicht so direkt funktioniert.
Ich hoffe das ist ein bisschen so, wie du es dir vorstellst.

Grüße merzi
 
Vielen Dank für deinen Tipp.
Leider funktioniert das nicht.
Ich erzeuge in einer Schleife Zeilen und Spalten. Es sind in diesem Fall 21950 Zellen.
Nach der Schleife, habe ich den Code, den du vorgeschlagen hast eingefügt, aber die Speicherfunktion wird nicht angesprungen.
Weiterhin besteht das Problem, dass wenn man von einer Zelle in die andere wechselt, dauert es fast ne Minute bis der Cursor in der neuen Zelle springt.
Ich habe jQuery eingebunden, da meine Schleife so aussieht:

Code: 
$.each(result, function(luser, userData) {
            innerTableForUser = document.createElement("TABLE");
           innerTableForUser.setAttribute("id","userTable"); 
  
   $.each(userData, function(article, price) {
           //hier zeuge ich Zeilen und Spalten
   }
}
//ich füge das an die ganze Tabelle und nicht an den tbody-tag an
$( "#userTable" ).delegate( "input", "change", function( event ) {
       saveInput( this ); //an jede Zelle ein Event anhänge
});

wieso springt er die Speichermethode nicht an?
Was habe ich falsch gemacht?
 
Folgendes verstehe ich nicht:
1. In der äußeren Schleife erzeugst Du bei jedem Durchlauf eine Tabelle und gibst ihr die ID "userTable". D. h. bei mehreren Durchläufen haben alle die selbe ID?
2. Was macht die Funktion saveInput? Speichert sie den Inhalt des aktuellen input-Elementes oder den aller in der Tabelle?

Hast Du das Formular online, damit man es sich in Aktion ansehen kann?
 
ja, es sind verschachtelte Tabellen.
Mein Dom-Baum sind so aus:

Code: 
<table id="mainTable">
    <thead>
             <tr>
                <td></td>
                <td></td>
                <td>
                        <table>
                             <tr>   ein paar td...</tr>
                         </table>
                </td>
             </tr>
     <thead>
      <tbody>
            <tr>
                 <td></td>
                <td></td>
                <td>
                        <table id="innerTable">
                             <tr>
                                   <td>
                                        <input></input>
                                   </td>
                            </tr>
                         </table>
                </td>
           </tr>
      </tbody>
</table>

Ich erzeuge für jeden User (er hat seine "innerTable") eine eigene Tabelle. Ein User hat 4 Artikel. Jedes Artikel kann innerhalb von 20 Tagen bestellt werden. So erzeuge ich 20 Input-Felder jedesmal aufs neue.
Manche von diesen 20 haben schon eine Bestellung, das plaziere ich dann in den passenden Input-Feld.
All das funktioniert bei Chrome wunderbar.
Aber IE geht in die knie, sobald ich mehr als 4000 Zellen (Inputfelder) erzeugen musste.
Vielleicht kann man irgendwas statisch machen, und immer wieder anfügen, aber das Problem bei der super-langsamen Verarbeitung bleibt auch dann bestehen, dass wenn ich von einer Zelle in die andere navigiere, IE dafür fast ne Minute braucht um den Cursor zu bewegen.
Letztendlich sollte das eine Excel-Tabelle ersetzen^^
 
Hallo,
sorry für die verspätete Antwort. Tatsächlich habe ich festgestellt, dass alle verschachtelten Tabellen die gleiche id haben, was natürlich falsch ist.
Beim Chrome oder Firefox merkt man durch diesen Fehler aber nicht, selbst, wenn man 200 solche Tabellen mit gleichen id's hat.
Beim IE dagegen hängt er sich auf ab 30 Tabellen mit diesem Fehler fast auf. Bei unter 30 Tabellen mit gleicher id, verhält er sich auch ganz normal.
Das war der Grund, warum mir dieser Fehler nicht eher aufgefallen war.
Danke, dass ich auf diesen Fehler aufmerksam geworden bin.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück