nicht angemeldet
In Tabelle zusätzliche Zeilen einfügen
JürgenBHallo,
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
-
Hallo huby,
Dieses Script funktioniert aber eigenartigerweise nur wenn man die Dokumenttyp-Deklaration und die <form></form> - Tags enfernt, was mir natürlich nichts nützt.
ich habe jetzt keine Lust, das Script zu kopieren und bei mir laufen zu lassen. Daher:
Was macht das Script, wenn es nicht funktioniert?
Welche Fehlermeldung kommt?
Hast du dir schon mal den generierten Quelltext (Auswahlquelltext) angesehen, so fern einer generiert wird?Gruß, Jürgen
-
Hallo Jürgen,
Danke für Deine Antwort.
Was macht das Script, wenn es nicht funktioniert?
Es macht nichts.
Welche Fehlermeldung kommt?
Leider kommt auch keine Fehlermeldung.
Hast du dir schon mal den generierten Quelltext (Auswahlquelltext) angesehen, so fern einer generiert wird?
Was meinst Du mit "generierten Quelltext"?
Der Dom-Baum im Dom Inspector von Firefox ändert sich nicht.
D.h es passiert überhaupt nichts.huby
-
Hellihello huby,
m.E. solltest Du das Problem isolieren.
Gruß,
frankx
-
Hellihello huby,
m.E. solltest Du das Problem isolieren.
Was meinstDu damit? Wie z.B?
huby
-
Hellihello huby,
Was meinstDu damit? Wie z.B?
Alles (!) rausschmeißen, was nicht zum Problem gehört, also in dem Fall vermutlich alles außer:
Doctype
ein Form
ein Table
eine Zeile
eine ZelleDas sind ein paar Zeilen Quelltext, das Problem ist schnell gelöst, dann schauen, was in der restlichen Tag-Suppe anders ist.
Dank und Gruß,
frankx
-
Hallo frankx,
Alles (!) rausschmeißen,.........
...das hab ich bereits gemacht, deshalb weiß ich ja daß es an der DTD und den <form> -Tags liegt.
Doctype
ein Form
ein Table
eine Zeile
eine Zellemehr ist nicht drin, außer dem Script.
Das sind ein paar Zeilen Quelltext, das Problem ist schnell gelöst,
hoffentlich :)
dann schauen, was in der restlichen Tag-Suppe anders ist.
eben nur DTD und <form> -Tags
Viele Grüße
huby
-
Hallo,
einen Fehler hab ich jetzt schon gefunden.
Der Name der Funktion war gleich dem name"" - Attribut des <selecct> Tags der die Funktion auslöst.
Den Namen der Funktion hab ich geändert, jetzt funktioniert es immerhin schon mit den <form> - Tags.Aber die dtd mcht mir noch Sorgen.
Ohne DTD funktioniert es, mit DTD nicht, wobei es egal ist welche DTD ich verwende. ob html oder xhtml, ob Strict oder Transitional.Hat noch jemand einen Tipp für mich?
Viele Grüße
huby
-
Aber die dtd mcht mir noch Sorgen.
Ohne DTD funktioniert es, mit DTD nicht, wobei es egal ist welche DTD ich verwende. ob html oder xhtml, ob Strict oder Transitional.Hat noch jemand einen Tipp für mich?
servus, also, sobald ich das select-Element umbenenne, funktionierts. Welchen Browser verwendest du?
-
-
-
-
-
-
-
-
Hallo huby,
ich habe noch mal einen Blick in dein Script geworfen:
<select name="pfetten" size="1" onchange="pfetten(this.value)">
hier benutze ich immer "this.options[this.options.selectedIndex].value". Keine Ahnung, ob es daran liegt. Sonst hilft nur debuggen, also das Script von Null auf in kleinen Schritten aufbauen und/oder mit reichlich alerts anreichern.
Gruß, Jürgen
-
Hallo Jürgen,
ich habe noch mal einen Blick in dein Script geworfen:
Danke
<select name="pfetten" size="1" onchange="pfetten(this.value)">
hier benutze ich immer "this.options[this.options.selectedIndex].value".
Habs auch schon mit:
<select name="pfetten" size="1" onchange="pfettt(this.form.pfetten.options[this.form.pfetten.selectedIndex].value)">
versucht - das ändert jedoch nichts.Sonst hilft nur debuggen, also das Script von Null auf in kleinen Schritten aufbauen und/oder mit reichlich alerts anreichern.
Das mach ich gerade.
Danke für Deine Antwort, da fühlt man sich gleich nicht mehr so "allein". :)
Viele Grüße
huby
-
-
Hallo,
ich hab mein script jetzt wie folgt gekürzt/abgeändert:
Ich hab das Formular um ein <input> ergänzt, welches beim Laden der Seite mit "Inhalt gefüllt wird".
Die Funktion hab ich so ergänzt, daß <input VALUE> bei jedem Ausführen der Funktion von "Inhalt" nach "anderer Inhalt" wechselt.
Dadurch sehe ich ob die Funktion initialisiert wird oder nicht.Die Funktion wird ausgeführt, d.h. <input VALUE> wechselt brav von "Inhalt" nach "anderer Inhalt" und umgekehrt, aber <tr> wird nicht eingefügt.
Wenn ich die DTD raushaue, wird auch <tr> eingefügt. (Das sehe ich im DOM-Inspector von Firefox)
Was stört die DTD an diesen Zeilen?
var foda = document.getElementById("gruda");
var bua1 = document.createElement("tr");
bua1.setAttribute("id", "pfette");
foda.insertBefore(bua1,sparren);Hier nochmal das geänderte Script am Sück:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM-Demo</title>
<script type="text/javascript">
/* <![CDATA[ */
function pfettt(stk) {
if (document.typ1masse.vn.value == "anderer Inhalt")
document.typ1masse.vn.value = "Inhalt";
else
document.typ1masse.vn.value = "anderer Inhalt";var foda = document.getElementById("gruda");
var bua1 = document.createElement("tr");
bua1.setAttribute("id", "pfette");
foda.insertBefore(bua1,sparren);}
/* ]]> */
</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="pfettt(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>
<input id="vn" name="vn" type="text" size="30" maxlength="30">
</form>
<script type="text/javascript">
/* <![CDATA[ */
document.typ1masse.vn.value = "Inhalt";/* ]]> */
</script>
</body>
</html>Viele Grüße
huby
-
Jetzt kommt das Beste:
In ie6, ie7, opera9.24 und Konqueror 3.5.5 funktioniert es,
in Firefox 2.0.0.8 auf Linux und FF 2.0.0.6 auf Windows funktioniert es nicht.Hat jemand eine IDEE?
huby
-
Hallo,
endlich funktioniert es.
Das Problem war => foda.insertBefore(bua1,sparren);
"sparren" war einfach die id von <tr>.
Jetzt hab ich sparren so:
var sparren = document.getElementById("sparren");
als Variable definiert und es funktioniert.
Viele Grüße
huby
-
-
-
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
Servus Huby,
eine kleine Lady hat mir geflüstert, dass du hier Hilfe brauchst. Is kein Problem, dein Fehler liegt daran, dass du deine Funktion genau so genannt hast wie das Select-Element. Wenn du z.B. <select name="servus" ....> schreibst, dann klappts.
Grüße nach BT!
Andi