Neue Tabellenzeile + Hintergrundfarbe wie?
Stephan Moos
ich habe folgendes, ich f�ge mittels Button eine neue Tabellenzeile ein, und
m�chte allerdings das jede zweite zeile eine andere Farbe hat (also
abwechslungsweise).
alles funktioniert soweit, gut nur die hintergrundfarbe nicht, wer kann mir
weiterhelfen.
***************************************
<script type="text/javascript">
function newline(buttonaddfeld)
{
// Neue Zeile kopieren/Duplizieren
neuezeile = document.getElementById('tabelle').lastChild.cloneNode(true);
document.getElementById('tabelle').appendChild(neuezeile);
// Vorhergehender "Button" deaktivieren.
buttonaddfeld.parentNode.parentNode.lastChild.childNodes[0].value='Feld
Hinzuf�gen';
buttonaddfeld.disabled = true;
// versuch Tabellenfarbe
if( id_zahl % 2 == 0)
{
document.getElementById('zeilenfarbe').style.backgroundColor = "#E5E5E5";
}
else
{
document.getElementById('zeilenfarbe').style.backgroundColor = "#FFFFFF";
}
}
</script>
<div align="center">
<center>
<table id="tabelle" border="0" width="570" cellspacing="0" cellpadding="0"
style="border:1px solid #000000;">
<tr id="zeilenfarbe">
<td width="30"><center><input type="checkbox" name="check"
value="ja"></center></td>
<td width="220"><center><input type="text" name="test"
value="tabellenzeile" style="width: 215;"></center></td>
<td width="10"></td>
<td width="110"><center><input type="button" value="Feld Hinzuf�gen"
onClick="newline(this)" style="width: 105;"></center></td>
<td width="200"><center><input type="radio" name="schriftdesign"
value="HAND" checked><span class="haupttext">Handschrift / </span><input
type="radio" name="schriftdesign" value="PLOTT"><span
class="haupttext">Druckschrift</span></center></td>
</tr>
</table>
</center>
</div>
*******************************************************
Danke
Stephan Moos
Christian Kirsch
> Hallo NG.
>
> ich habe folgendes, ich fï¿œge mittels Button eine neue Tabellenzeile ein, und
> mï¿œchte allerdings das jede zweite zeile eine andere Farbe hat (also
>
> alles funktioniert soweit, gut nur die hintergrundfarbe nicht, wer kann mir
> weiterhelfen.
>
> ***************************************
>
> <script type="text/javascript">
> function newline(buttonaddfeld)
> {
> // Neue Zeile kopieren/Duplizieren
> neuezeile = document.getElementById('tabelle').lastChild.cloneNode(true);
> document.getElementById('tabelle').appendChild(neuezeile);
>
> // Vorhergehender "Button" deaktivieren.
> buttonaddfeld.parentNode.parentNode.lastChild.childNodes[0].value='Feld
> buttonaddfeld.disabled = true;
>
>
> // versuch Tabellenfarbe
> if( id_zahl % 2 == 0)
and id_zahl is declared where? You calculate it where?
Thomas 'PointedEars' Lahn
> Stephan Moos schrieb:
>> // versuch Tabellenfarbe
>> if( id_zahl % 2 == 0)
>
> and id_zahl is declared where? You calculate it where?
Even if it was declared, it is not going to work for *a lot* of other
reasons. Indeed, the posting, headers and body, was so completely clueless
that I did not bother replying to it.
PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300...@news.demon.co.uk> (2004)
typo
button-press
1. declare row-counter in global scope.
2. set the new rows background-color after creation of the new row
a table-row with id='zeilenfarbe' does not exist
alternatively you could use style sheets
<style>
tr.even {background-color:red;}
tr.odd {background-color:blue;}
</style>
and set different classnames like : neuezeile.className='odd'
syntax on id would be
tr#even {..} and neuezeile.id='even';
<script type="text/javascript">
var id_zahl=1;
function newline(buttonaddfeld) {
id_zahl++;
//duplicate row
neuezeile=document.getElementById('tabelle').lastChild.cloneNode(true);
document.getElementById('tabelle').appendChild(neuezeile);
//deactivate button just used
buttonaddfeld.parentNode.parentNode.lastChild.childNodes[0].value='add
row';
buttonaddfeld.disabled = true;
if( id_zahl % 2 == 0) {
neuezeile.style.backgroundColor='#e5e5e5';
} else {
neuezeile.style.backgroundColor='#ffffff';
}
}
</script>
Roland Frank
Robin Rattay
> ich habe folgendes, ich füge mittels Button eine neue Tabellenzeile ein, und
> möchte allerdings das jede zweite zeile eine andere Farbe hat (also
> abwechslungsweise).
>
> alles funktioniert soweit, gut nur die hintergrundfarbe nicht, wer kann mir
> weiterhelfen.
Musst Du den IE unterstützen? Wenn nicht ist das im CSS ohne Zusätze im
JavaScript trivial zu lösen:
tr { background-color: white }
tr:nth-child(even) { background-color: black }
Und mit IE könntest du eine Klasse benutzen, die du nur noch
setzen/entfernen müsstest (s.u.):
tr { background-color: white }
tr.even { background-color: black }
> ***************************************
>
> <script type="text/javascript">
> function newline(buttonaddfeld)
> {
> // Neue Zeile kopieren/Duplizieren
> neuezeile = document.getElementById('tabelle').lastChild.cloneNode(true);
> document.getElementById('tabelle').appendChild(neuezeile);
Du solltest getElementById nicht ohne Überprüfung, ob es tatsächlich was
gefunden hat, verwenden. Und es zweimal Aufrufen auch nicht sinnvoll.
Lokal verwendete Variablen sollten mit 'var' deklariert werden, damit
sie eben lokal und nicht global sind.
lastChild liefert das letztes *Kind* nicht das letzte *Element* je nach
Browser und ursprünglichen HTML-Code erreichst du damit einen
Text-Knoten. In Tabellen gibt es die rows-Collection, mit der du
zuverlässig auf die Zeilen zugreifen kannst:
var tabelle = document.getElementById('tabelle');
if (tabelle) {
var neuezeile = tabelle.rows[tabelle.rows.length -1].cloneNode(true);
tabelle.appendChild(neuezeile);
// ...
}
> // Vorhergehender "Button" deaktivieren.
> buttonaddfeld.parentNode.parentNode.lastChild.childNodes[0].value='Feld
> Hinzufügen';
Worauf genau versuchst du hier zuzugreifen?
buttonaddfeld.parentNode.parentNode.lastChild.childNodes[0] sollte
wieder auf buttonaddfeld verweisen.
> buttonaddfeld.disabled = true;
>
> // versuch Tabellenfarbe
> if( id_zahl % 2 == 0)
> {
> document.getElementById('zeilenfarbe').style.backgroundColor = "#E5E5E5";
> }
> else
> {
> document.getElementById('zeilenfarbe').style.backgroundColor = "#FFFFFF";
> }
IDs müssen in einem HTML-Dokument eindeutig sein.
document.getElementById wird im besten Fall immer nur das erste Element
mit der ID zurückliefern. Die Tabellenzeile, die du gerade erstellt
hast, wirst du so gar nicht erreichen. Aber das brauchst du eh nicht, du
hast doch mit "neuezeile" schon eine Referent darauf. Zusammen mit dem
CSS mit der Klasse "even" oben kannst du die Farbe z.B. so setzen:
neuezeile.className = neuezeile.className == "even" ? "" : "even";
> }
> </script>
>
> <div align="center">
> <center>
> <table id="tabelle" border="0" width="570" cellspacing="0"
cellpadding="0"
> style="border:1px solid #000000;">
Hmm, es ist 2010. Ich denke es wäre Zeit für die Zentrierung sowie den
ganzen Tabellen-Attributen CSS zu benutzen. Beispiel:
<table id="tabelle">
und
#tabelle {
width: 570px;
border-spacing: 0;
border: 1px solid #000000;
margin: auto; /* Zentriert die Tabelle */
}
#tabelle td {
border: none;
padding: 0;
text-align: center; /* Macht die ganzen <center> in den Tabellenzellen
auch unnötig. */
}
> <tr id="zeilenfarbe">
Die ID ist unnötig, wie oben erklärt.
> <td width="30"><center><input type="checkbox" name="check"
> value="ja"></center></td>
> <td width="220"><center><input type="text" name="test"
> value="tabellenzeile" style="width: 215;"></center></td>
In CSS (nicht im HTML!) sind für Längenangaben Einheiten vorgeschrieben:
width: 215px;
> <td width="10"></td>
> <td width="110"><center><input type="button" value="Feld Hinzufügen"
> onClick="newline(this)" style="width: 105;"></center></td>
> <td width="200"><center><input type="radio" name="schriftdesign"
> value="HAND" checked><span class="haupttext">Handschrift /</span><input
> type="radio" name="schriftdesign" value="PLOTT"><span
> class="haupttext">Druckschrift</span></center></td>
> </tr>
> </table>
> </center>
> </div>
Grundsätzlich wäre es Dir zu empfehlen dein HTML zu validieren, denn
DOM/JavaScript-Operationen an kaputtem HTML ist nur eine unnötige
Fehlerquelle.
Robin
Thomas 'PointedEars' Lahn
^^^^
Nomen est omen?
> alternating background color on table row, table row is appended by
> button-press
> 1. declare row-counter in global scope.
Unnecessary. tableOrTBody.rows.length
> 2. set the new rows background-color after creation of the new row
>
> a table-row with id='zeilenfarbe' does not exist
It does exist.
> alternatively you could use style sheets
> <style>
The #REQUIRED `type' attribute is missing.
> tr.even {background-color:red;}
> tr.odd {background-color:blue;}
Avoid declaring `color' or `background-color' alone, though.
<http://www.w3.org/QA/Tips/color>
> </style>
> and set different classnames like : neuezeile.className='odd'
> syntax on id would be
> tr#even {..} and neuezeile.id='even';
Only that this would work only one time. IDs must be unique throughout a
document.
The following might not be from you, but while I am at it ...
> <script type="text/javascript">
> var id_zahl=1;
> function newline(buttonaddfeld) {
> id_zahl++;
> //duplicate row
>
> neuezeile=document.getElementById('tabelle').lastChild.cloneNode(true);
Undeclared identifier, error-prone referencing.
> document.getElementById('tabelle').appendChild(neuezeile);
Error-prone referencing.
> //deactivate button just used
>
> buttonaddfeld.parentNode.parentNode.lastChild.childNodes[0].value='add
> row';
Error-prone referencing, as said before.
> buttonaddfeld.disabled = true;
Why not allow adding more than one row?
> if( id_zahl % 2 == 0) {
> neuezeile.style.backgroundColor='#e5e5e5';
> } else {
> neuezeile.style.backgroundColor='#ffffff';
> }
See above.
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
Richard Cornford
> typo wrote:
<snip>
>> neuezeile=document.getElementById('tabelle').
>> lastChild.cloneNode(true);
>
> Undeclared identifier, error-prone referencing.
>
>> document.getElementById('tabelle').appendChild(neuezeile);
>
> Error-prone referencing.
While we are at this, if "tabelle" is the ID of a table, as it is in
the OP, its - lastChild - is not going to be a TR element (more likely
a table section element of some sort), so the object being cloned is
the wrong type of object. And, if it were a TR, and so the clone was a
clone of a TR, then appending the clone to the TABLE element would be
theoretically incorrect in an HTML DOM, and would not 'work' in IE at
minimum.
Richard.
Thomas 'PointedEars' Lahn
I find it more likely that a white-space text node is going to be cloned
here :)
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
Stephan Moos
> if (tabelle) {
> var neuezeile = tabelle.rows[tabelle.rows.length -1].cloneNode(true);
> tabelle.appendChild(neuezeile);
> // ...
> }
Danke, hab das nun einmal ausprobiert, allerdings erscheint keine neue
Tabellenzeile.
>> // Vorhergehender "Button" deaktivieren.
>> buttonaddfeld.parentNode.parentNode.lastChild.childNodes[0].value='Feld
>> Hinzufügen';
>
> Worauf genau versuchst du hier zuzugreifen?
> buttonaddfeld.parentNode.parentNode.lastChild.childNodes[0] sollte wieder
> auf buttonaddfeld verweisen.
und zwar sollte ja eine neue Tabellenzeile erscheinen, und der Button mit
dem ich die neue Zeile "aktiviert" habe, sollte dementsprechend deaktiviert
werden, und in der neuen Zeile die erschienen ist ist widerum ein Butten
vorhanden, mit dem ich widerum eine neue Tabellenzeile "hinzufügen" kann.
u.s.w.
deshalb deaktiviere ich die "buttons" witer oben, da sie sonst einfach
irreführend sind.
wie gesagt es erscheinen sonst keine neue Tabellenzeilen.
bitte um hilfe
Danke