Javascript und HTML-Tabelle

[markus]

Hallo zusammen,

ich habe aktuell ein Problem.
Ich will per Javascript eine Artikel-Tabelle interaktiv abändern....

z.B.

<table title="Artikel">
 <tr id="Artnr_13">
  <td>14</td><td>Artikeltext1</td><td>Preis1</td>
 </tr>
 <tr id="Artnr_49">
  <td>49</td><td>Artikeltext2</td><td>Preis2</td>
 </tr>
</table>

nun würde ich per JS gerne einen weiteren Artikel einfügen, nur kann ich leider einfach keine gut funktionierende Möglichkeit finden. Kann mir hier evtl jemand helfen?

Um einen Artikel zu löschen gehe ich aktuell wie folgt vor: document.getElementById(Artnr_49).style.display=none;
gibt es hier eine einfache Möglichkeit um das komplette tr einfach zu löschen?

Danke schonmal im Voraus

Gruß Markus

[Fredo]

gibt es hier eine einfache Möglichkeit um das komplette tr einfach zu löschen?

Mit removeChild()

MfG Fredo

[markus]

gibt es hier eine einfache Möglichkeit um das komplette tr einfach zu löschen?

Mit removeChild()

MfG Fredo

du meinst:  document.getElementById('Artikel').removeChild('Artnr_49');

oder hab ich mal wieder einen Denkfehler? funktioniert leider nicht...
Hast du mir evtl noch einen Tipp, wie ich ein neuen "Artikel" einfügen kann?

DANKE!!!!!

[Fredo]

Hast du mir evtl noch einen Tipp, wie ich ein neuen "Artikel" einfügen kann?

guck dir mal die, die dir knusperklumpen geschrieben hat da steht alles drin was du wissen musst...

MfG Fredo

[Knusperklumpen]

Hi.
Les dir mal das durch und das.
Da stehen deine Antworten ... aber erwarte nicht, dass es leicht wird ;-)

mfg
Knusperklumpen

[markus]

Hi.
Les dir mal das durch und das.
Da stehen deine Antworten ... aber erwarte nicht, dass es leicht wird ;-)

mfg
Knusperklumpen

Danke werde ich durchlesen, bzw. hab ich schonmal, aber ist für mich einfach viel zu komplex, oder stell ich mich nur dumm an :s
na sei´s drum, ich werde es versuchen.

BTW. gibt es nen Tipp, auf was ich bei dieser Tabellenstruktur achten muss? Habe irgendwo gelesen, dass das nur mit createTextNode funktionieren würde, was aber mit tabellen Probleme macht, oder habe ich was falsch verstanden?

[Fredo]

´BTW. gibt es nen Tipp, auf was ich bei dieser Tabellenstruktur achten muss? Habe irgendwo gelesen, dass das nur mit createTextNode funktionieren würde, was aber mit tabellen Probleme macht, oder habe ich was falsch verstanden?

verushcs doch mal mit createElement("td") bzw. ("tr") je nachdem

mit createTextNode bestimmst du dann den Inhalt von "td" durch appenChild

MfG Fredo

[Kalle_B]

Hallo,

document.getElementById(Artnr_49).style.display=none;

Ist das ein Tippfehler? Was steht in der Variablen Artnr_49?

Mich interessiert, wie du die veränderte Tabelle wegspeicherst. Oder ist die ganze Mühe vergebens, wenn der Browser geschlossen wird?

Kalle

[markus]

Hallo,

document.getElementById(Artnr_49).style.display=none;

Ist das ein Tippfehler? Was steht in der Variablen Artnr_49?

Mich interessiert, wie du die veränderte Tabelle wegspeicherst. Oder ist die ganze Mühe vergebens, wenn der Browser geschlossen wird?

Kalle

Hi Sorry, natürlich Tippfehler....
so ists meiner Meinung anch richtig: document.getElementById('Artnr_49').style.display=none;

Das mit dem wegspeichern ist ganz einfach, da ich das Ganze in eine JS-Funktion packen werde, die dann über die ajaxtoolbox und PHP/MySQL die Daten in einer MySQL-DB speichert..... das funktioniert schon ;-)
nur eben bei der Anzeige blicke ich null durch :(

[twseiten_de]

Hallo,

nachfolgend die dynamische Erzeugung einer Tabelle per JavaScript für das HTML-DOM des Internet Explorers.

Gruss Tom

Tabelle erzeugen: nur per DOM-Funktionen

var X00=document.createElement('TABLE');
      var TabellenZeiger=document.body.appendChild(X00);

Tabellenelemente erzeugen: Es gibt 2 Varianten

Elemente der Tabelle können sein (Tagnamen)
  TR  Zeile bestehend aus optionalen Spalten (TD)
  TD  Spalte in einer Zeile (TR)
  COLGROUP    Gruppierte Spalten (TD)
    kann  keine TD enthalten, da sonst unwirksam
    Besonderheit beim codieren in HTML Beispiel:
     <TABLE BORDER="2" RULES="groups">
      <COLGROUP SPAN="2" STYLE="color:red"></COLGROUP>
           <COLGROUP STYLE="color:blue"></COLGROUP>
      <TR>
       <TD>Zeile 1 This column is in the first group.</TD>
       <TD>Zeile 1 This column is in the first group.</TD>
       <TD>Zeile 1 This column is in the second group.</TD>
      </TR>
      <TR>
       <TD>Zeile 2 This column is in the first group.</TD>
       <TD>Zeile 2 This column is in the first group.</TD>
       <TD>Zeile 2 This column is in the second group.</TD>
      </TR>
          <TABLE>

erste  COLGROUP hat 2 Spalten (TD)
     zweite COLGROUP hat unbekannte Zahl von Spalten (TD)

Der Browser ordnet die erste 2  TD der jeweiligen TR der ersten  COLGROUP zu
         alle anderen TD der jeweiligen TR der zweiten COLGROUP zu

Tabelle muss IMMER bereits erzeugt worden sein per DOM

var X00=document.createElement('TABLE');
       var TabellenZeiger=document.body.appendChild(X00);

Variante 1 per TABLE-Objekt-Funktionen (keine DOM-Funktionen) (siehe auch unten) als effektivste Variante

Tabellenelement erzeugen am Beispiel TR
             oTR = TabellenZeiger.insertRow(); // automatisch append

Variante 2 per DOM uund Objekte THEAD, TBODY, TFOOT, CAPTION als sehr umständliche Variante

Diese Objekte erzeugen Beispiel für TBODY

var X00=document.createElement('TBODY');
        var TBODYObjekt=TabellenZeiger.appendChild(X00);

Tabelle darf mehrere TBODY haben

TD und TR erzeugen am Beispiel für TR im TBODY

var X00=document.createElement('TR');
        var TRObjekt=TBODYObjekt.appendChild(X00);

THEAD darf enthalten   TR (auch mehrere) und damit auch TD
  TBODY darf enthalten TR (auch mehrere) und damit auch TD
      mehrere TBODY pro Tabelle zulässig
  TFOOT darf enthalten   TR (auch mehrere) und damit auch TD
  CAPTION   Titel der Tabelle standardgemäß über dem Tabellenbeginn
      Positionierung per .valign='top';  // Standard
          .valign='bottom';
       mehr gibts nicht

Funktionen der Erzeugung von Tabellenelementen per Table-Objekt-Funktionen Variante 1
-------------------------------------------------------------------------------------
sind keine DOM-Funktionen
es gibt keine Funktion für COLGROUP

id_head=id_table.createTHead();   liefert Zeiger auf TH oder null
         mehrere TH erzeugbar
id_table.deleteTHead();    zuletzt erzeugten TH löschen, liefert nichts
       es gibt keine Index da keine Collection verfügbar (ausser document.all)

id_TR=id_table.insertRow([iRowIndex]); liefert Zeiger auf TR oder null
       iIndex -1 Standard für append an rows-Collection zur Tabelle
         wenn >=0 so Element an aktueller Indexpos in Collection rows eingebaut
         Achtung: Index sollte lückenlos sein wegen Konsistenz des Objektes
id_table.deleteRow([iRowIndex]);  löscht TR
       iRowIndex  Index ab 0 des TR in rows-Collection zu Tabelle
             Standard letzte TR in rows-Collection

id_TD=id_TR.insertCell([iCellsIndex]); liefert Zeiger auf TD oder null
       iIndex -1 Standard für append an cells-Collection zum TR
         wenn >=0 so Element an aktueller Indexpos in Collection cells eingebaut
         Achtung: Index sollte lückenlos sein wegen Konsistenz des Objektes
id_TR.deleteCell([iCellsIndex]);  löscht TD
       iCellsIndex  Index ab 0 des TD in cells-Collection
          Standard letzte TD in cells-Collection zu TR

id_TFoot=id_table.createTFoot();    liefert Zeiger auf Foot oder nul
         mehrere Foot erzeugbar
id_tabelle.deleteTFoot();     zuletzt erzeugten Foot löschen, liefert nichts
       es gibt keine Index da keine Collection verfügbar (ausser document.all)

id_Caption=id_table.createCaption(); liefert Zeiger auf Caption oder nul
         mehrere erzeugbar aber nur die ERSTE Caption lsöchbar !
id_table.deleteCaption();    löscht NUR ZUERST erzeugtes Caption
       es gibt keine Index da keine Collection verfügbar (ausser document.all)

für Indexe siehe unten Collectionen

Tipp: Zeigerfeld aufbauen zur Tabelle Beispiel:

// +++++ Datenfelder indexsynchron und identische Länge
 var X00=new Array
 (true,   // 1. TR, 1. Element MUSS TR sein
  false,false,false, //    alle TD der 1. TR
  true,   // 2. TR
  true,   // 3. TR
  false   // alle TD der 3. TR
 );
 var X00a=new Array // .innerHTML
 ('',    // 1. TR kein Inhalt da .innerText und .innerHTLM nicht belegbar
  'a','b','c',  // alle TD der 1. TR
  '',
  '',
  '<B>d</B>'  // alle TD der 3. TR
 );
 // +++++ Zeigerfeld der Tabellenelemente erzeugen
 var X01=new Array();
 // +++++ Tabelle erzeugen per DOM
 var X02=document.createElement('TABLE');
 var X03=document.body.appendChild(X02);
 // +++++ Caption erzeugen
 var X99=X03.createCaption();
 X99.innerHTML='<B>Tabellenkopf</B>';
 // X00.valign='top' oder 'bottom' funktioniert nicht, immer 'top' automatisch also über Tabelle
 //  innerHTML-Breite per Schrift beeinfluss Tabellenbreite beim rendern !
 // +++++ Tabellenelemente erzeugen
 var X04=0;
 var X05=X00.length;    // Lange von X00 und X00a
 var X06=false;     // Feldelement aus X00
 var X07=-1;     // Index TR, muss -1 sein
 var X08=-1;     // Index TD in TR, muss -1 sein
 for(X04=0;X04<X05;X04++)   // Datenfelder abklappern
 {X06=X00[X04];     // Flag auf TD bzw. TR
  if(X06)      // TR
  {X07++;      // nächstes TR einstellen
   X01[X07]=X03.insertRow();   // TR in Tabelle einfügen
   X08=-1;      // init Index TD
  }
  else      // TD zum aktuellen TR
  {X08++;      // nächstes TD einstellen
   X01[X07][X08]=X01[X07].insertCell();
   X01[X07][X08].innerHTML=X00a[X04];
  }
 }

.innerText und .innerHTML
-------------------------

TR-Objekt nur lesbar
 TD-Objekt lesen und schreiben

Collectionen zu Tabellenelementen TR und TD
-------------------------------------------

Tabelle hat Collection row aller TR der Tabelle   id_tabelle.rows
                       tBodies aller TBODY der Tabelle id_tabelle.tBodies
jede TR hat eigene Collection cells aller TD zum TR  id_TR.cells

Collectionen haben Eigenschaft .length
             werden gefüllt in Reihenfolge der Erzeugung der Tebellenelemente

id_objekt.sourceIndex  liefert Index ab 0 aus Collection document.all (nur lesen)
      id-Objekt   TD, TR, TH, Tbody, TFoot, Caption

TR und TD haben folgende Eigenschaften bezüglich zugehöriger Collection:
  liefern Index des Objektes in Collection (nur lesen, Index ab 0)

id_TR.rowIndex    liefert Index ab 0 aus row-Collection der Tabelle
  id_TD.cellIndex   liefert Index ab 0 aus cells-Collection des zugehörigen TR-Objektes