innerHTML bei <table> legt den browser lahm / bitte um hilfe / siehe mein quellcode und die komentare im quellcode

backup92 · 7. November 2013

Guten abend,

Guten Abend,

Die Kommentare im Quellcode "//" beschreiben eigentlich schon mein ganzes Problem. Hinzu muss gesagt werden, dassmich viel mehr der Grund interessiert als eine Lösung. Besonders auffällig sind die wiedersprüche dort die mich völlig aus dem Konzept bringen

ACHTUNG !!! der quelltext enthält laut console keine fehler !!
Die Zeileneinrückung wird nur hier im forum durcheinander

edit: und außerdem zeigt er noch die tabelle falsch an, wenn das in der for schleife ist. sollte ja eigentlich auch alles in einer zeile!

edit : mich interessiert wirklich nur warum das so ist und keine Lösung

HTML

<html><body>
<table id="theT" border="3"></table>
<script>










// works great ///////////////////////document.getElementById('theT').innerHTML = " " + "<tr>" +"<td>1</td>" + "<td>2</td>" +"<td>3</td>" + "<td>4</td>" +"</tr>";













// works great /////////////////////////document.getElementById('theT').innerHTML += " " +" " +"<tr>" +"<td>10</td>" + "<td>20</td>" +"<td>30</td>" + "<td>40</td>" +"</tr>";
















// the problems beginns///////////////////
for ( i = 1 ; i < 33 ; i++ ) {







// ok ////////////document.getElementById('theT').innerHTML += " " +" " +"<tr>" +"<td>001</td>" + "<td>002</td>" +"<td>003</td>" + "<td>004</td>" +"<td>005</td>" + "<td>006</td>" +"<td>007</td>" + "<td>008</td>" +"<td>009</td>" + "<td>010</td>" +
"</tr>        <tr>";




// FAIL !!!! also will made many///////performance problems /////for ( j = 1 ; j < 33 ; j++ ) {                document        .getElementById('theT')        .innerHTML += "<td> x </td>";
        }
document.getElementById('theT').innerHTML += "</tr>";







}













</script>

Alles anzeigen

Ganz kurz nochmal :

ladeproblem ( Browser stürzt dadurch sogar schon mal ab )

layout Problem. Die Tabelle wird föllig falsch angezeigt

ich bedanke mich schonmal im voraus

cottton · 7. November 2013

Also guck Dir erstmal an was Du da geschrieben hast, wenn man es untereinander anreiht:

HTML

<html><body>
<table id="theT" border="3"></table>
<script>




document.getElementById('theT').innerHTML = 
    " " 
    + "<tr>" 
    +"<td>1</td>" 
    + "<td>2</td>" 
    +"<td>3</td>" 
    + "<td>4</td>" 
    +"</tr>";




document.getElementById('theT').innerHTML 
    += " " 
    +" " 
    +"<tr>" 
    +"<td>10</td>" 
    + "<td>20</td>" 
    +"<td>30</td>" 
    + "<td>40</td>" 
    +"</tr>";




// the problems beginns///////////////////
for ( i = 1 ; i < 33 ; i++ ) {
    document.getElementById('theT').innerHTML 
        += " " 
        +" " 
        +"<tr>" 
        +"<td>001</td>" 
        + "<td>002</td>" 
        +"<td>003</td>" 
        + "<td>004</td>" 
        +"<td>005</td>" 
        + "<td>006</td>" 
        +"<td>007</td>" 
        + "<td>008</td>" 
        +"<td>009</td>" 
        + "<td>010</td>" 
        +"</tr>        <tr>";
}




document.getElementById('theT').innerHTML += "</tr>";







} /*<= klammer ? wovon ?*/

Alles anzeigen

so könnte man das Ganze umsetzen:

HTML

<!DOCTYPE html>
<html>
    <head>




        <table id="theT" border="3">
            <!-- ... -->
        </table>
        <script>
            var table = document.getElementById("theT");
            var tr = document.createElement("tr");
                tr.setAttribute("class","deineClass"); /*bsp zum attribute setzen*/
                tr.innerHTML = "test"; /*der tr inhalt geben*/




            /*tr an table (tbody) adden:*/
            table.appendChild(tr);







            /*die schleife*/
            var tr = document.createElement("tr");
            for(var i=1;i<33;i++){
                var temp_tr = tr.cloneNode(false); /* cloneNode() => http://www.w3schools.com/jsref/met_node_clonenode.asp*/
                temp_tr.innerHTML = "00"+i;
                table.appendChild(temp_tr);
            }




            /*oder auch mit attributen:*/
            var tr = document.createElement("tr");
            tr.setAttribute("class","deineClass");
            for(var i=1;i<33;i++){
                var temp_tr = tr.cloneNode(true); /*true if you want to clone the node, its attributes, and its descendants => http://www.w3schools.com/jsref/met_node_clonenode.asp*/
                temp_tr.innerHTML = "mit attributen --00"+i;
                table.appendChild(temp_tr);
            }
        </script>







    </body>
</html>

Alles anzeigen

backup92 · 8. November 2013

BEVOR IHR DEN QUELLTEXT LIEST
Schaut euch bitte den Screenshot , den
ich an den beitrag angehanhen habe ( siehe
ganz unten... am ende diesen Beitrag ) !!!!!

[HTML]

<!---

Danke fuer die ruekmeldung und fuer
deine bemuengen. Dein script ist auch
wohl wesentlich Profissioneller geschrieben.

Leider ist es nicht das was ich suche. Ich
suche wohl eher nach einer Antwort warum
die erste script Variante klappt und die
zweite nicht. Obwohl sie von aufbau
her eigentlich genau gleich sind. Zumindest
der HTML code. Ich hatte bis jetzt auch keine
probleme mit innerHTML und auch nicht
bei einer For-Schleife. Außer der geschichte
mit der Tabelle, was halt mir völlig unlogisch
erscheint warum es nicht klappt.

Hier noch eine minimalistische Version
von meinem Script. Script 1 klappt aber
Script 2 nicht.

Jedoch die Probe mit der For-Schleife, wo
ich eine dritte tabelle erstellt hatte klappt
reibungslos?

Warum klappt denn das mit innerHTML Script 1
und mit For-Schleife Nicht?

Warum hängt sich der browser ( jeder auch beim
PC ) auf, wenn ich den wert z.B auf 33 erhöhe?
Warum ist es denn bei der nicht innerHTML
variante kein problem?

Warum zeigt er mir bei der innerHTML Script 1
variante es in einer Spalte?

Warum zeigt er es mir in den Script 1 wo ich auch
innerHTML verwende aber ohne For-Schleife
problemlos an und ohne performance probleme?

--->

Mit innerHTML ohne For-Schleife
<table border= "3" id= "tab1" ></table>
<hr>
Mit innerHTML mit For-Schleife
<table border= "3" id= "tab2" ></table>
<hr>
Ohne innerHTML aber mit For-Schleife

<script>

document.getElementById
("tab1").innerHTML +=

"<tr>"+
"<td> 1 </td>" + "<td> 2 </td>" + "<td> 3 </td>"+
"</tr>"+

"<tr>"+
"<td> 4 </td>" + "<td> 5 </td>" + "<td> 6 </td>"+
"</tr>"+

"<tr>"+
"<td> 7 </td>" + "<td> 8 </td>" + "<td> 9 </td>"+
"</tr> "

;

</script>

<script>

var Zaeler = 1 ;

for ( y = 1 ; y <= 3 ; y++ ) {

document.getElementById
("tab2").innerHTML +=

"<tr>"
;

for ( x = 1 ; x <= 3 ; x++ ) {

document.getElementById
("tab2").innerHTML +=

"<td>" + Zaeler + "</td>";
;

Zaeler ++ ;

}

document.getElementById
("tab2").innerHTML +=

"</tr>"
;

}

</script>

<script>

var Zaeler2 = 1 ;

document.write ( "<table border ='3' >" );
for ( y = 1 ; y <= 3 ; y++ ) {

document.write("<tr>");

for ( x = 1 ; x <= 3 ; x++ ) {

document.write( "<td>" + Zaeler2 + "</td>" );

Zaeler2 ++ ;

}

document.write("</tr>");

}
document.write( "</table>" );

</script>

</body></html>

[/HTML]

innerHTML bei <table> legt den browser lahm / bitte um hilfe / siehe mein quellcode und die komentare im quellcode

Jetzt mitmachen!

Teilen