nicht angemeldet
Hallo,
um in eine Tabelle zusätzliche Zeilen einzufügen, habe ich versucht mir auf der Grundlage des vorletzten Beispiels von hier: http://www.galileocomputing.de/openbook/javascript_ajax/16_dom_003.htm#d1e6ed2bf3131016411e7433c5259cc2
folgendes Script zu basteln:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM-Demo</title>
<script type="text/javascript">
/* <![CDATA[ */
function pfetten(stk) {
if (document.getElementById("pfette")) {
document.getElementById("gruda").removeChild(document.getElementById("pfette"));
}
var foda = document.getElementById("gruda");
var bua1 = document.createElement("tr");
var bua2 = document.createElement("td");
var bua3 = document.createElement("table");
var colgr = document.createElement("colgroup");
var bua4 = document.createElement("tbody");
bua1.setAttribute("id", "pfette");
foda.insertBefore(bua1,sparren);
bua2.setAttribute("colspan", "2");
bua2.setAttribute("id", "bua2");
bua1.appendChild(bua2);
bua3.setAttribute("id", "bua3");
bua3.setAttribute("style", "table-layout: fixed; border-collapse:separate; width:100%;");
bua2.appendChild(bua3);
colgr.setAttribute("id", "colgr");
bua3.appendChild(colgr);
for (var i=1; i<=8; i++) {
spalte = document.createElement("col");
spalte.setAttribute("id", "col" + i);
colgr.appendChild(spalte);
}
col1.setAttribute("width", "29%");
col2.setAttribute("width", "13%");
col3.setAttribute("width", "12%");
col4.setAttribute("width", "6%");
col5.setAttribute("width", "9%");
col6.setAttribute("width", "13%");
col7.setAttribute("width", "12%");
col8.setAttribute("width", "6%");
bua4.setAttribute("id", "bua4");
bua3.appendChild(bua4);
for (var i=1; i<=stk; i++) {
zeile = document.createElement("tr");
zeile.setAttribute("id", "pfette" + i);
bua4.appendChild(zeile);
pfi = document.getElementById("pfette" + i);
for (var zi=1; zi<=8; zi++) {
zelle = document.createElement("td");
zelle.setAttribute("id", i+"_"+zi);
pfi.appendChild(zelle);
}
textzel1 = document.createTextNode("Pfette "+i);
document.getElementById(i+"_1").appendChild(textzel1);
textzel2 = document.createTextNode("Breite :");
document.getElementById(i+"_2").appendChild(textzel2);
textzel3 = document.createElement("input");
textzel3.setAttribute("name", "pfette"+i+"_b");
textzel3.setAttribute("type", "text");
textzel3.setAttribute("size", "2");
textzel3.setAttribute("maxlength", "2");
document.getElementById(i+"_3").appendChild(textzel3);
textzel4 = document.createTextNode(" cm");
document.getElementById(i+"_4").appendChild(textzel4);
textzel6 = document.createTextNode("Höhe :");
document.getElementById(i+"_6").appendChild(textzel6);
textzel7 = document.createElement("input");
textzel7.setAttribute("name", "pfette"+i+"_h");
textzel7.setAttribute("type", "text");
textzel7.setAttribute("size", "2");
textzel7.setAttribute("maxlength", "2");
document.getElementById(i+"_7").appendChild(textzel7);
textzel8 = document.createTextNode(" cm");
document.getElementById(i+"_8").appendChild(textzel8);
}
}
/* ]]> */
</script>
</head>
<body id="alles">
<form class ="ptop" style="width:100%;" id="typ1masse" name="typ1masse" method="post" action="http://192.168.1.22/angebot.php?prod=Dach-komplett">
<table id="vtable" style="border:1px solid #cc3333; width:60%;">
<tbody id="gruda">
<tr><td>erste Zeile</td><td>erster Wert</td></tr>
<tr><td>zweite Zeile</td><td>
<select name="pfetten" size="1" onchange="pfetten(this.value)">
<option value="">-----</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td></tr>
<tr id="sparren"><td colspan="2">
Sparren
</td></tr>
</tbody>
</table>
</form>
</body>
</html>
Dieses Script funktioniert aber eigenartigerweise nur wenn man die Dokumenttyp-Deklaration und die <form></form> - Tags enfernt, was mir natürlich nichts nützt.
Bin für jeden Tipp dankbar.
huby
JürgenB