Ergebnis 1 bis 4 von 4

Thema: innerHTML bei <table> klappt nicht, wenn ich eine FOR-Schleife anwende

  1. #1
    HTML Newbie
    Registriert seit
    13.11.2013
    Beiträge
    2
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard innerHTML bei <table> klappt nicht, wenn ich eine FOR-Schleife anwende

    Die frage hatte ich schon im anderen Forum gestellt aber leider keine befriedigende
    Antwort erhalten



    Mein Problem ist, dass die 3 presentierten Scripte genau das selbe ausführen müssen.
    Bloß "Script 2" Klappt nicht !!! ( Siehe Kommentar im Quellcode und Screenshot )

    ( siehet unerwünscht aus und es gibt performance probleme bei größeren zahlen )




    Mich Interessiert vorallem der Grund warum es nicht klappt !!! Warum es ausgerechnet
    auf die weise nicht klappt !!! Erscheint mir als völlig unlogisch !!!




    Brauche nähmlich den Programmierstil eventuell für ähnliche scripte. Desshalb wollte ich
    es mal nicht umgehen und verstehen, warum es so nicht geht wie erwünscht, wobei
    mir das auch als völlig unlogisch erscheint, wenn ich "Script 2" mit "Script 1" und "Script 3" vergleiche.
    Ich bitte also um Verständniss und um Hilfe.





    Ich danke schonmal im voraus !







    Und ja ! Es siehet sowohl auf den smartphone als auf dem pc gleich aus !!!
    Es ist also kein Browser fehler !








    HTML-Code:
    <html><head></head><body>
    
    
    
    
    
    
    
    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
    <!--- Tabelle entsteht hier durch document.write(); ist ja --->
    <!--- Schließlich ohne innerHTML --->
    
    
    
    
    
    
    
    
    
    
    <!--- ------------------Klappt reibungslos---------------------- --->
    
    <!--- Script 1 - ANFANG --->
    <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 1 - ENDE --->
    
    
    
    
    
    
    
    
    
    
    
    
    <!--- ------------------Klappt nicht wie es soll !!!!! ---------------------- --->
    <!--- ------------------Bei größeren zahlen gibt es sogar noch Performance --->
    <!--- ------------------Probleme !!!! ------------------------------------------- --->
    <!--- ------------------Zeigt wie man im Screenshot siehet, es auch falsch --->
    <!--- ------------------an !!!! -------------------------------------------------- --->
    <!--- ---------------------------------------------------------------------------- --->
    <!--- --->
    <!--- Mir ist die Lösung an erster stelle völlig unwichtig !!!!!!!!!!
    Erstmal suche ich den grund !!!!!!!
    Das ist für mich relevant, weil ich auf dieser Grundlage ein paar
    script vorlagen erstellen möchte. Auch vergleichbar mit so was in
    der Art Framework. --->
    <!--- --->
    <!--- Relevant ist es halt, dass ich verstehe, was ich mache.
    Kann ja zwar nicht alles hinterfragen, aber genau dieser Fall
    erscheint mir als völlig unlogisch warum das nicht klappt. --->
    
    
    <!--- Script 2 - ANFANG --->
    <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 2 - ENDE --->
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <!--- ------------------Klappt reibungslos---------------------- --->
    
    <!--- Script 3 - ANFANG --->
    <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>
    <!--- Script 3 - ENDE --->
    
    
    
    
    
    
    
    
    
    
    
    
    </body></html>

    EDIT: Diesen Beitrag habe ich soeben jetzt, c.a 3 Tage nach der Erstellung des Beitrages, bearbeitet, weil im "Script 2" ein Semikolion zu viel war.
    Dennoch sind "keine" Veränderungen sichtbar. Scheint wohl eine Code Unreinheit gewesen zu sein die JavaScript toleriert. Also ignoriert die
    kleine Korrektur, denn sie hat keinerlei auswirkungen auf die Funktionsweise meines Codes, also weder negative gehabt noch positive bekommen.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von backup92 (18.11.2013 um 01:07 Uhr)

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: innerHTML bei <table> klappt nicht, wenn ich eine FOR-Schleife anwende

    Du rufst innerhalb der Schleife innerhtml auf und ersetzt immer den Inhalt der Vorher drin war. Sprich das TR-Element fällt weg. Hier solltest du besser in eine Variable schreiben und den Inhalt der Variablen anschliessend innerhtml zuweisen.
    Mit der dritten Funktion schreibst du lediglich Ausgaben hintereinander weg.

    Also innerhtml ersetzt Inhalte innerhalb des Elementes im DOM.
    write tätigt lediglich Ausgaben an der Stelle wo sich der Zeiger befindet.

  3. Folgende User finden die Antwort von explanator gut:


  4. #3
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: innerHTML bei <table> klappt nicht, wenn ich eine FOR-Schleife anwende

    Warum machst du das über innerHTML und nicht direkt über Objekte?
    for 1
    zeile erstellen
    for 2
    spalten für erstellte zeile erstellen und füllen
    end for 2
    end for 1

    Code:
    <table id="tab1" border="1">
        
    </table>
    
    <script type="text/javascript">
        function fill() {
            var table = document.getElementById("tab1");
            
            for (var r = 0; r < 5; r++) {
                var new_row = '<tr>';
                for(var c = 0; c < 3; c++) {
                    new_row += '<td>' + r + '/' + c + '</td>';
                }
                table.innerHTML += new_row + '</tr>';
            }
        }
        
        fill();
    </script>
    so funzt Script 2 Variante bei mir ^^
    Ergebnis:
    0/0 0/1 0/2
    1/0 1/1 1/2
    2/0 2/1 2/2
    3/0 3/1 3/2
    4/0 4/1 4/2

    gut explanator war schneller
    Geändert von Bleistift (13.11.2013 um 18:48 Uhr)


  5. Folgende User finden die Antwort von Bleistift gut:


  6. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    13.11.2013
    Beiträge
    2
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: innerHTML bei <table> klappt nicht, wenn ich eine FOR-Schleife anwende

    guten abend,

    erstmal möchte ich mich entschuldiegen, dass ich mich so verspätet wieder zurück melde. Hatte nähmlich nichtmal wochenende zeit.

    Und dann möchte ich mich bei euch für eure Antworten bedanken. Sowohl bei "Bleistift" als auch bei "explanator"

    Leider muss ich hinzusagen, dass ich bezüglich diesen Vorfall immernoch eine Wissenslücke habe, wo ich aber halt zumindest schon
    eine lösung von euch habe, die nicht mein Programmstil zumindest nicht wiederspricht.


    Und jetzt zur bleibenden Wissenlücke:
    wenn ich <table> durch <xmp> ersetze dann kommt folgendes raus
    wenn man es untereinander schreibt :




    mein Script
    der nicht funktioniert

    <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 von Bleistifft
    der wirklich funktioniert !

    <tr>
    <td>0/0</td>
    <td>0/1</td>
    <td>0/2</td>
    </tr>

    <tr>
    <td>1/0</td>
    <td>1/1</td>
    <td>1/2</td>
    </tr>

    <tr>
    <td>2/0</td>
    <td>2/1</td>
    <td>2/2</td>
    </tr>

    <tr>
    <td>3/0</td>
    <td>3/1</td>
    <td>3/2</td>
    </tr>

    <tr>
    <td>4/0</td>
    <td>4/1</td>
    <td>4/2</td>
    </tr>





    vielleicht müsste ich mich dann mit der der Aussage von "explanator" auseinandersetzen um das komplett zu verstehen, aber das auch halt erstaml so hinnehmen,
    egal wie unlogisch mir das "mit meinen jetztiegen wissenstand" erscheint


    Aber auf jeden fall dennoch vielen dank für eure hilfe und dennoch waren das schonmal aussagekräftiege antworten

Ähnliche Themen

  1. InnerHTML übergeben
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 09.03.2013, 15:14
  2. innerHTML alternative
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 04.01.2010, 16:48
  3. INSERT klappt nicht / utf8 nicht übernommen
    Von craven-city im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 06.11.2008, 15:33
  4. Antworten: 2
    Letzter Beitrag: 08.09.2008, 17:52
  5. Wenn, ja wenn das Wörtchen Wenn nicht wär ....
    Von umbenannt im Forum Off Topic und Quasselbox
    Antworten: 5
    Letzter Beitrag: 09.11.2003, 00:16

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •