Per DOM Tabelle aufbauen

[notebook20000]

Hallo,

ich habe ein kleines Problem. ich möchte eine Tabelle aufbauen. Diese hat aber mehrere BEreiche mit rowspans. Da bin ich grade am verzweifeln dran Wie kriegt man sowas hin. Irgendwie zerläuft die ZTabelle bei mri immer. Kennt jemand ne gute Routine bzw Lösungsansatz für sowas

 

[Sven Mintel]

Naja...rowspan ist ein ganz normales HTML-Attribut, du musst es nur in der jeweiligen Zelle setzten per setAttribute().

kleines Beispiel(funktioniert nicht im IE):

<script type="text/javascript">
<!--
window.onload=function()
{

  table = document.createElement('table');
  table.setAttribute('border','1');
  tr    = document.createElement('tr');
  td    = document.createElement('td');
  txt   = document.createTextNode('zelle');
  td.appendChild(txt);
  tr1   = tr.cloneNode(true);
  tr1.appendChild(td.cloneNode(true));
  tr1.appendChild(td.cloneNode(true));
  tr1.firstChild.setAttribute('rowspan',2);
  tr2   = tr.cloneNode(true);
  tr2.appendChild(td.cloneNode(true));
  table.appendChild(tr1);
  table.appendChild(tr2);
  document.getElementsByTagName('body')[0].appendChild(table);

}
//-->
</script>

 

[notebook20000]

Hi,

danke . Die Tabelle als solches bekomme ich shcon hin. Auch unterm IE aber irgendwie nicht mit rowspans.

Ichh habe heir mal meinen Code angefügt. Der inzwischen unterm Firefox die korrekte Tabelle erzeugt. Unterm IE werden die zusätzlichen Felder einfach hinten dran gefügt:

Ne Idee?(

 // Zeitpanel erstellen -> box_zeitenlist
 var tagesnamen = Array('Mo','Di','Mi','Do','Fr','Sa','So');
 
 //Table
 var MAINID = 'box_zeitenlist'; 
 var ntable = document.createElement("table");
 ntable.setAttribute("id", 'table_zeitplan');
 ntable.setAttribute("cellpadding", '1');
 ntable.setAttribute("cellspacing", '0');
 ntable.style.width= '96%';
 document.getElementById(MAINID).appendChild(ntable);
 
 // tbody
 var ntbody = document.createElement("tbody");
 ntbody.setAttribute("id", 'tbody_zeitplan');
 document.getElementById('table_zeitplan').appendChild(ntbody);
 

 for (var i=-1 ; i<=23 ;i++)
  {
  for (var k = 0; k < 4 ;k++)
   {
   for (var j = -1 ; j <7; j++)
    {
    // td1
    if(j== -1 && i ==-1 && k == 0)// ZEIT
     {
     // tr
     var ntr = document.createElement("tr");
     ntr.setAttribute("id", 'tr_zeitplan_'+i);
     document.getElementById('tbody_zeitplan').appendChild(ntr);
   
     var ntd1 = document.createElement("td");
     ntd1.setAttribute("id", 'td1_zeitplan_'+j+'_'+i);
     ntd1.style.backgroundColor= '#999999';
     ntd1.innerHTML = '&nbsp;Zeit&nbsp;';
     document.getElementById('tr_zeitplan_'+i).appendChild(ntd1);
     }
    else if(i== -1  && k == 0 )// TAGESNAME
     {
     var ntd1 = document.createElement("td");
     ntd1.setAttribute("id", 'td1_zeitplan_'+j+'_'+i);
     ntd1.style.backgroundColor= '#9999ff';
     ntd1.style.width = "80px";
     ntd1.innerHTML = '&nbsp;'+tagesnamen[j]+'&nbsp;';
     document.getElementById('tr_zeitplan_'+i).appendChild(ntd1);
     }
    else if(j== -1 && k == 0) // Zeitanzeige
     {
     // tr
     var ntr = document.createElement("tr");
     ntr.setAttribute("id", 'tr_zeitplan_'+i);
     document.getElementById('tbody_zeitplan').appendChild(ntr);
   
     var ntd1 = document.createElement("td");
     ntd1.setAttribute("id", 'td1_zeitplan_'+j+'_'+i);
     ntd1.setAttribute("rowSpan", '5');
     ntd1.style.backgroundColor= '#9999ff';
     ntd1.style.verticalAlign= 'top';
     if(i<10){time = '&nbsp;0'+i+':00&nbsp;';}else{time = '&nbsp;'+i+':00&nbsp;';}
     ntd1.innerHTML = time;
     document.getElementById('tr_zeitplan_'+i).appendChild(ntd1);
     }
    else if(i != -1 && j != -1) // MainTD Element
     {
     if(j==0)
      {
      // tr
      var ntr = document.createElement("tr");
      ntr.setAttribute("id", 'tr_zeitplan_'+i);
      document.getElementById('tbody_zeitplan').appendChild(ntr);
      }
     
     if(i%2){var color='#ddddff';}else{var color='#bbbbff';}
     
     var ntd1 = document.createElement("td");
     ntd1.setAttribute("id", 'td1_zeitplan_'+j+'_'+i);
     ntd1.style.backgroundColor= color;
     ntd1.style.cursor= 'pointer';
     ntd1.style.height= '10px';
      
     ntd1["onmouseover"] = new Function("this.style.backgroundColor='#ff0000'");//ie+firefox#ffff8d
     ntd1["onmouseout"] = new Function("this.style.backgroundColor='"+color+"'");//ie+firefox#dddddd
     
     
     if(k==0){var minute = '00';}
     if(k==1){var minute = '15';}
     if(k==2){var minute = '30';}
     if(k==3){var minute = '45';}
     if(i<10){var zeit = '0'+i+':'+minute;}else{var zeit = +i+':'+minute;}
     
     var daynumber  = j+1;
     
     
     
     ntd1["onclick"]=new Function("selectTimepart('"+zeit+"',"+j+",'"+daynumber+"')");//ie+firefox
     
     //ntd1.innerHTML = j+' '+i;
     document.getElementById('tr_zeitplan_'+i).appendChild(ntd1);
     }
    }
   }
  }