Node-Tabelle im IE
AK-Palme
- javascript
Hi,
ich versuche eine Tabelle mit dem DOM-Objekt zu erstellen. FF und Opera spielen da auch mit, nur der IE macht Probleme. Es gibt keine Fehler, etc. Das Script läuft durch, nur es gibt keine Tabelle.
Hat jemand eine Idee, was daran nicht funktionieren könnte und warum?
-----------------
<html>
<head>
<script language="javascript">
function createTable(){
var col;
var row;
for(var y = 0; y < 10; y++){
col = document.createElement("tr");
for(var x = 0; x < 10; x++){
row = document.createElement("td");
row.style.width = 50;
row.style.height = 50;
row.style.textAlign = 'center';
row.innerHTML = x + '/' + y;
col.appendChild(row);
}
document.getElementById('t').appendChild(col);
document.getElementById('b').value = 'ok';
}
}
</script>
</head>
<body>
<input type="button" id="b" onclick="createTable();">
<table border="1" id="t"></table>
</body>
</html>
----------------
Danke,
AK-Palme
Hello,
Hat jemand eine Idee, was daran nicht funktionieren könnte und warum?
ja: im Internet Explorer ist tr nicht unmittelbares Kind von table, stattdessen fehlt dazwischen thead, tbody, tfoot oder was dir sonst noch so einfällt. (SELFHTML: Aufbau einer Tabelle)
Ganz generell kannst du dir einiges an Arbeit sparen, wenn du dich der DOM-Methoden für Tabellen bedienst, siehe z.B. Beschreibung in der MSDN-Library.
MfG
Rouven
Hi,
ja: im Internet Explorer ist tr nicht unmittelbares Kind von table, stattdessen fehlt dazwischen thead, tbody, tfoot oder was dir sonst noch so einfällt. (SELFHTML: Aufbau einer Tabelle)
Das wars :)
Hier der aktuelle Code fürs Archiv:
----------
function createTable(){
var col;
var row;
var tbody;
tbody = document.createElement("tbody");
for(var y = 0; y < 10; y++){
col = document.createElement("tr");
for(var x = 0; x < 10; x++){
row = document.createElement("td");
row.style.width = 50;
row.style.height = 50;
row.style.textAlign = 'center';
row.innerHTML = x + '/' + y;
col.appendChild(row);
}
tbody.appendChild(col);
document.getElementById('b').value = 'ok';
}
if (document.getElementById('t').getElementsByTagName("tbody").length > 0) document.getElementById('t').removeChild(document.getElementById('t').getElementsByTagName("tbody")[0]);
document.getElementById('t').appendChild(tbody);
}
------------
Ganz generell kannst du dir einiges an Arbeit sparen, wenn du dich der DOM-Methoden für Tabellen bedienst, siehe z.B. Beschreibung in der MSDN-Library.
Ich erstelle nicht mehr als soeine Matrix, das ist mit der Methoden schon getan. Da möchte ich mich nicht auf noch was spezielleres einlassen :)
Aber danke für den Tipp
AK-Palme
Hallo,
Zusätzlich zum dem, was Rouven dir bereits gesagt hat (also dass „tbody“ fehlt):
<html>
<head>
<script language="javascript">
Hier fehlt das vorgeschriebene type-Attribut. „language“ kannst du dagegen weglassen.
function createTable(){
var col;
var row;for(var y = 0; y < 10; y++){
Das ist zwar nicht falsch aber zumindest nicht üblich. Für for-Schleifen verwendet man i.d.R. Buchstaben ab „i“. Das machst ein Script für andere überschaubarer.
col = document.createElement("tr");
for(var x = 0; x < 10; x++){
row = document.createElement("td");
row.style.width = 50;
Da du hier mit Stylesheets arbeitest, MUSST du auch eine Maßeinheit mit angeben.
row.style.height = 50;
row.style.textAlign = 'center';
row.innerHTML = x + '/' + y;
Wozu „innerHTML“, wenn du nur blanken Text einfügen willst? Nimm lieber das hier:
row.appendChild(document.createTextNode(x + '/' + y));
document.getElementById('t').appendChild(col);
<input type="button" id="b" onclick="createTable();">
<table border="1" id="t"></table>
Du musst die Tabelle nicht vorher schon im Quelltext haben. Erstelle lieber ein Objekt, das die gesamte Tabelle enthält.
Hier mal meine Version deines Scriptes:
function createTable(Button){
var Tabelle = document.createElement("table");
Tabelle.border = "1";
Tabelle.appendChild(document.createElement("tbody"));
with (Tabelle.firstChild){ //um die Tabelle nicht jedesmal neu referenzieren zu müssen
for (var i = 0; i < 10; i++){
appendChild(document.createElement("tr")); //Tabellenzeile anhängen
for (var j = 0; j < 10; j++){
lastChild.appendChild(document.createElement("td")); //Tabellenzelle anhängen
with (lastChild.lastChild){ //Alle weiteren Anweisungen auf die Tabellenzelle anwenden
appendChild(document.createTextNode(i + "/" + j)); //Text einfügen
style.width = "50px";
style.height = "50px";
style.textAlign = "center";
}
}
}
}
document.body.appendChild(Tabelle); //alternativ könntest du auch insertBefore verwenden
Button.value = "OK";
}
Dein HTML-Body könnte dann so aussehen:
<body>
<input type="button" onclick="createTable(this);">
</body>
Ich hoffe, die vielen „http://de.selfhtml.org/javascript/sprache/objekte.htm#with@title=with“-Abkürzungen sind jetzt nicht zu verwirrend.
mfg. Daniel
Hi,
Das ist zwar nicht falsch aber zumindest nicht üblich. Für for-Schleifen verwendet man i.d.R. Buchstaben ab „i“. Das machst ein Script für andere überschaubarer.
Wesentlich verwirrender als das y als Schleifenvariable finde ich, daß
col = document.createElement("tr");
die Variable namens col(umn) eine table-row enthält,
wohingegen
row = document.createElement("td");
die Variable namens row eine Tabellenzelle (also gewissermaßen eine col(umn)) enthält ...
cu,
Andreas