Mit Javascript Zeilen in einer Tabelle hinzufügen (gelöst) (HTML, CSS und Javascript)

[thread]16658[/thread]

Mit Javascript Zeilen in einer Tabelle hinzufügen [gelöst]

Tags: HTML Javascript Ähnliche Threads

Leser: 16

Articles: hide open all | hide show old branches

+13 replies

Kuerbis

2011-08-26 00:22

User since
2011-03-20
947 Artikel
BenutzerIn
[default_avatar]

Hallo,

ist es bei dieser HTML-Seite möglich, mit Javascript jedesmal eine neue Eingabezeile hinzuzufügen, sobald alle drei Felder der letzen Zeile ausgefüllt wurden?

Code (html): (dl )

<!DOCTYPE HTML>
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<form>
        <br /><br />
        <table border="1">
                <tr><th>Menge</th><th>Bezeichnung</th><th>Euro/Stück</th></tr>
                <tr>
                        <td><input type="number" name="menge" /></td>
                        <td><input type="text"   name="bezeichnung" /></td>
                        <td><input type="text"   name="euro_stueck" /></td>
                </tr>
        </table>
        <br /><br />
        <br /><input type="submit" value="OK"/>
</form>
</body>
</html>

+12 replies

bianca

2011-08-26 05:29

User since
2009-09-13
7016 Artikel
BenutzerIn

user image

Mit var trhtml = document.getElementById("tabellen_id").insertRow(nummer); ein neues Objekt erzeugen, dann mit tdhtml = document.createElement("td"); noch eines, Inhalt rein mit tdhtml.innerHTML = 'content'; und das ganze mit trhtml.appendChild(tdhtml); einfügen.
Geht auch mit ganz normalen input Feldern in den Spalten.

10 print "Hallo"
20 goto 10

+11 replies

Kuerbis

2011-08-26 07:35

User since
2011-03-20
947 Artikel
BenutzerIn
[default_avatar]

Code (html): (dl )

<!DOCTYPE HTML>
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
                function ad_row()
                {
                        var nummer = 1;
                        var tabellen_id = "t1";
                        var trhtml = document.getElementById( tabellen_id ).insertRow( nummer );
                        var tdhtml1 = document.createElement( "td" );
                        var tdhtml2 = document.createElement( "td" );
                        var tdhtml3 = document.createElement( "td" );
                        tdhtml1.innerHTML = ''; // content
                        tdhtml2.innerHTML = '';
                        tdhtml3.innerHTML = '';
                        trhtml.appendChild( tdhtml1 );
                        trhtml.appendChild( tdhtml2 );
                        trhtml.appendChild( tdhtml3 );
                }
        </script>
</head>

<body>
<form>
        <br /><br />
        <table id="t1" border="1">
                <tr><th>Menge</th><th>Bezeichnung</th><th>Euro/Stück</th></tr>
                <tr>
                        <td><input type="number" name="menge" /></td>
                        <td><input type="text"   name="bezeichnung" /></td>
                        <td><input type="text"   name="euro_stueck" /></td>
                </tr>
        </table>
        <br /><br />
        <input type="button" value="Eintrag hinzufügen" onclick="ad_row()" />
        <br /><br />
        <br /><input type="submit" value="OK"/>
</form>
</body>
</html>

Wie kann ich erreichen, dass die Zeilenhöhe gleich ist wie bei der ersten Zeile, ohne einen Content einzufügen?

+2 replies
bianca

2011-08-26 07:45

User since
2009-09-13
7016 Artikel
BenutzerIn

2011-08-26T05:35:48 Kuerbis
Wie kann ich erreichen, dass die Zeilenhöhe gleich ist wie bei der ersten Zeile, ohne einen Content einzufügen?

Schwierig bei Tabellen. Warum müssen die unbedingt leer eingefügt werden?
10 print "Hallo"
20 goto 10
- Kuerbis
  
  2011-08-26 08:17
  
  User since
  2011-03-20
  947 Artikel
  BenutzerIn
  
  Die Tabelle wird vom Benuter der Seite ausgefüllt.
+3 replies

Kuerbis

2011-08-26 09:44

User since
2011-03-20
947 Artikel
BenutzerIn
[default_avatar]

Habe einen Weg gefunden. Ich weiß aber nicht, ob das Einfügen der INPUT-Elemente als String so üblich ist.

Code (html): (dl )

<!DOCTYPE HTML>
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
                function ad_row()
                {
                        var table_id = "t1";
                        var table = document.getElementById( table_id );
                        var rows = table.getElementsByTagName( "tr" ).length;
                        var tr = table.insertRow( rows );
                        var td1 = document.createElement( "td" );
                        var td2 = document.createElement( "td" );
                        var td3 = document.createElement( "td" );
                        td1.innerHTML = '<input type="number" name="menge" />';
                        td2.innerHTML = '<input type="text" name="bezeichnung" />';
                        td3.innerHTML = '<input type="text" name="euro_stueck" />';
                        tr.appendChild( td1 );
                        tr.appendChild( td2 );
                        tr.appendChild( td3 );
                }
        </script>
</head>

<body>
<form>
        <br /><br />
        <table id="t1" border="1">
                <tr><th>Menge</th><th>Bezeichnung</th><th>Euro/Stück</th></tr>
                <tr>
                        <td><input type="number" name="menge" /></td>
                        <td><input type="text"   name="bezeichnung" /></td>
                        <td><input type="text"   name="euro_stueck" /></td>
                </tr>
        </table>
        <br /><br />
        <input type="button" value="Eintrag hinzufügen" onclick="ad_row()" />
        <br /><br />
        <br /><input type="submit" value="OK"/>
</form>
</body>
</html>

+2 replies
bianca

2011-08-26 10:07

User since
2009-09-13
7016 Artikel
BenutzerIn

2011-08-26T07:44:37 Kuerbis
Habe einen Weg gefunden. Ich weiß aber nicht, ob das Einfügen der INPUT-Elemente als String so üblich ist.

Genau so meinte ich das, so mache ich das auch immer. Aktuelle Browser raffen das auf jeden Fall. Vorgesehen ist wahrscheinlich, jedes Element einzeln in das DOM einzuhängen. Ist etwas aufwendiger.
10 print "Hallo"
20 goto 10
- Kuerbis
  
  2011-08-26 11:38
  
  User since
  2011-03-20
  947 Artikel
  BenutzerIn
  
  Danke für's Helfen.

+5 replies
GwenDragon

2011-08-26 11:54

User since
2005-01-17
14761 Artikel
Admin1

Gleiche Zeilenhöhe?
a) Mit CSS bei tr und td eine Klasse zuweisen.
oder
b) Mit JS die Tabellenzeilenhöhe auslesen und den anderen zuweisen.

Welches kennst und kannst du oder brauchst weitere Hilfe?

Last edited: 2011-08-26 12:07:58 +0200 (CEST)
die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
- +4 replies
- Kuerbis
  
  2011-08-26 14:25
  User since
  2011-03-20
  947 Artikel
  BenutzerIn
  Ich habe es mit Javascript probiert, aber das hat mir kein Resultat geliefert:
  
  Code (html): (dl )
  
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
  
  <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function displayResult() { var h = document.getElementById("tr_1").style.height; document.write( h ); } </script> </head> <body> <form> <table id="t1" border="1"> <tr id="test"><th>Menge</th><th>Bezeichnung</th></tr> </table> <br /><br /> <input type="button" onclick="displayResult()" /> </form> </body> </html>
  - +3 replies
  - bianca
    
    2011-08-26 14:40
    
    User since
    2009-09-13
    7016 Artikel
    BenutzerIn
    
    nimm lieber .offsetHeight ohne style
    Und lies die td aus, nicht die tr
    
    Editiert von bianca: Ergänzung td
    Last edited: 2011-08-26 14:42:21 +0200 (CEST)
    10 print "Hallo"
    20 goto 10
    - +2 replies
    - Kuerbis
      
      2011-08-26 15:14
      
      User since
      2011-03-20
      947 Artikel
      BenutzerIn
      
      Thx, damit hat's geklappt.
      - bianca
        
        2011-08-26 16:48
        
        User since
        2009-09-13
        7016 Artikel
        BenutzerIn
        
        Bitte, gern.
        10 print "Hallo"
        20 goto 10

View all threads created 2011-08-26 00:22.