Tabellen (DOM-Beispiel)

Tabellen sind ein mächtiges Darstellungs- und Präsentationsmittel.

Die möglichen DOM-Funktionalitäten zum Aufbau einer Tabelle sind bei den Browsern noch nicht alle vollständig verfügbar. Es ist aufwendig, das Tabellen-Objekt bei den Browsern (einheitlich nach den W3C- DOM-Vorgaben) vollständig zu implementieren. Es gibt z.Z. Browser-Besonderheiten. Nach W3C ist z.B. zum Hinterlegen von Attributen obj.setAttribute("class", wert) vorgesehen Der MS-Browser 6 braucht aber z.B. obj.setAttribute("className", wert).

Mit document.getElementById(id) kann auf html-Elemente einer Seite zugegriffen werden. Der Identifizierer id wird seitenweit eindeutig gewählt. In ein solches div-Element (mit id) kann eine Tabelle eingefügt werden, die Tabelle kann gelöscht, geändert oder modifiziert neu aufgebaut werden.

Sind die Inhalte im arr[]-Array "matrixweise" enthalten, und einige att[]-Attribute für die Tabellenelemente definiert, so erstellt die Funktion
build_dom_table("id-tabelle-1", arr, att) mit Hilfe der DOM-Objekte die Tabelle.

<div id="id-tabelle-1"></div>

<script type="text/javascript">
  // arr[]=Inhalte der Tabellenelemente
  // att[]=Attribute der Tabellenelemente
  build_dom_table("id-tabelle-1", arr, att);// schreibt die Tabelle 
</script>

Beipiele für eine ECMAScript-Tabelle

Die folgende Funktion build_dom_table(id, arr, att) verwendet zum Objekt-Aufbau einer html-Tabelle die Dom-Funktionen

.createElement(...)
.createTextNode(...)
.appendChild(...)
.setAttribute(...,...)

Das Tabellen-Objekt wird mit Hilfe von .getElementById(...). in der html-Seite positioniert. Die Funktion
build_dom_table(id, arr, att) bekommt vom arr-Array die Element-Daten und und vom att-Array die Attribute:.

<script type="text/javascript">
function build_dom_table(id, arr, att) {
  if(!arr) return; if(!arr[1]) return;
  var has_th=(arr!=null)&&(arr[0]!=null)&&(arr[0].length>1);
  var row = arr.length;
  var col = arr[1].length; 
  var doc = document;
  var ot_cont = doc.getElementById(id);
  if(!ot_cont) {alert("ERR: id?"); return;} 
  if(ot_cont.childNodes.length > 0)
     ot_cont.removeChild(ot_cont.childNodes[0]);
  var clientPC = navigator.userAgent.toLowerCase(); 
  var isIE =((clientPC.indexOf('msie') !=-1)
           &&(clientPC.indexOf('opera')==-1)); 
  var w3cName="class"; if(isIE) w3cName="className";
  var ot_table = doc.createElement("table");
  var ot_body = doc.createElement("tbody");
  for (var j=0; j < row; j++) {
    if(j==0)if(!has_th) continue;
    var akt_row = doc.createElement("tr");
    for (var i=0; i < col; i++) {
      var td="td"; if(j==0) td="th"; 
      var akt_cell = doc.createElement(td);
      var cell_text=""; 
      if(arr[j]&&arr[j][i]) cell_text=arr[j][i];
      var akt_text = doc.createTextNode(cell_text);
      akt_cell.appendChild(akt_text);
      if(att&&att[j]&&att[j][i]) {
        akt_cell.setAttribute(w3cName,att[j][i]);
      }  
      akt_row.appendChild(akt_cell);
    } ot_body.appendChild(akt_row);
  } 
  ot_table.appendChild(ot_body); 
  if(att&&att[0]){
   if(att[0]['class'])ot_table.setAttribute(w3cName,att[0]['class']);
   if(att[0]['border'])ot_table.setAttribute('border',att[0]['border']);
   if(att[0]['align'])ot_table.setAttribute('align',att[0]['align']);
   if(att[0]['width'])ot_table.setAttribute('width',att[0]['width']);
  }
  ot_cont.appendChild(ot_table);
}
</script>

Aufruf der ECMAScript-Funktion

Die folgende Funktion
build_dom_table(id, arr, att) bekommt vom arr-Array die Element-Daten und und vom att-Array die Attribute.

Durch var arr = []; wird ein neuer Array angelegt. Die Tabellen-Zellen-Inhalte werden zeilenweise in arr hinterlegt. Der Aufruf build_dom_table("id-tabelle-1", arr); kommt ohne den att-Array aus, d.h. es werden keine Tabellen-Attribute gesetzt.

<div id="id-tabelle-1"></div>

<script type="text/javascript">
  var arr = [];
      arr[0] = []; // [0] =   Table-Zeile th
      arr[1] = []; // [1] = 1.Table-Zeile tr
      arr[2] = []; // [2] = 2.Table-Zeile tr
   
  // Tabellen-Elemente-Texte:
  /*th:*/ arr[0][0]="00"; arr[0][1]="01"; arr[0][2]="02";
  /*tr:*/ arr[1][0]="10"; arr[1][1]="11"; arr[1][2]="12";
  /*tr:*/ arr[2][0]="20"; arr[2][1]="21"; arr[2][2]="22"; 
  
  build_dom_table("id-tabelle-1", arr);
</script>

Existiert eine css-Table-Class 'table1' so wird der Bezeichner in att[0]['class'] = 'table1'; hinterlegt. Die Tabellenausrichtung kann mit att[0]['align'] auf 'center' oder 'right' oder 'left' (default) gesetzt werden. Die Tabellen-Breite ist hier att[0]['width'] = '62%'. Sollen besondere Elemente herausgehoben werden, so kann eine css-class angegeben werden, wie z.B. att[2][2] = 'roti';

// arr[] wie oben und zusätzlich Attribute und Style-Class:
  var att = []; 
      att[0] = []; // Array für Tabelle-Style att[0][0]
      att[0]['class'] = 'table1'; // css-Table-Class
      att[0]['align'] = 'center'; // 'left', 'right', 'center'
      att[0]['width'] = '62%';    // Tabellen-Breite
   
      att[2] = []; // Array für Style-Klassen der Zeile 2
      att[2][2] = 'roti';   // css-Klasse

  build_dom_table("id_tabelle_2", arr, att);

Beipiele für eine dynamische Tabellen-Verarbeitung

Für die Text-Eingabe können in Tabellen-Elementen input-Tags verwendet werden, die in einem umschliessenden form-Tag sind.
GROBENTWURF (Prinzip) etwa

<form action='' id='MYID' onsubmit = 'return false;'>
     
 <table><tr><td>
     <input type='text' value="" size='2' maxlength='2' readonly='readonly' />
   </td><td>
     <input type='text' size='2' maxlength='2' value='' />
 </td></tr><tr><td> ...
    </td><td> ... 
 </td></tr></table>

</form>

Die input-Tags können die Inhalte bewahren. Auf diese input-Inhalte (value, Werte) kann etwa wie folgt zugegriffen werden.
Prinzip grob etwa:

 this.form = document.getElementById(id); 
 this.inp = this.form.getElementsByTagName('input');
 var k=3; // k-tes input-Element:
 this.inp[k].value = '77';
 var x = this.inp[k].value;

Bitte testen: Berechne Lösche
Ggf. bitte den Quelltext dieser Seite anschauen.