Tabellen-Zeilen-Farbe ändern (höheres Niveau)

RedPartisan

RedPartisan

Grünschnabel
Hallo Leute!

Nachdem dies mein erster Eintrag ist, will ich euch alle zuerst einmal herzlich begrüßen!

Ich habe folgendes Problem / Fragestellung:

Ich will ein Javascript schreiben, welches die Hintergrundfarbe eines Tabellenfeldes <td> ändert.
Nun befinden sich in einer Tabellenreihe <tr> aber mehrere dieser Kästchen, die die Farbe ändern. Wenn ich nun auf ein <td> klicke, so soll dies die Hintergrundfarbe ändern. Klicke ich nun auf ein anderes <td> der selben Reihe, so soll das vorherige wieder die ursprüngliche Farbe annehmen und das neu angeklickte die Farbe ändern usw.

Die Frage ist: wie?

Ich dachte an eine Funktion, die beim Klicken auf eines der Feldchen ausgeführt wird. Dann überprüft es alle <td> der <tr> ob sie nicht eine andere Klasse (CSS oder was auch immer) sind, setzt diese zurück und das neue wird gesetzt.
Am Besten wärs mit zwei Parameter, einer für Feld x, einer für Reihe y...

Danke im Vorhinein,

Reddie
 
Zuletzt bearbeitet:
Hi,

ich hoffe, ich habe Dich richtig verstanden.

Das JavaScript zum Wechseln der Farben:
Code: 
// Variable
var colOld = "";    // Alte Farbe
var objOld = null;    // Altes Objekt

// Browseridentifikation
IE = document.all && !window.opera;
DOM = document.getElementById && !IE;

function changeBGColor(strID, strCol){
    // Objekt ermitteln
    var myObj = (IE)?document.all[strID]:document.getElementById(strID);
    // Falls altes Objekt existiert
    if(objOld != null)
        objOld.style.backgroundColor = oldColor;

    // Aktuelle Farbe speichern, neue Farbe zuweisen, Objekt speichern
    oldColor = myObj.style.backgroundColor;
    myObj.style.backgroundColor = strCol;
    objOld = myObj;
}
Die zugehörige Tabelle mit den Funktionsaufrufen:
Code: 
<table border="1">
    <tr style="height: 10px;">
        <td style="width: 10px; background-color: #FFFFFF;" id="td1" onClick="changeBGColor('td1', '#FFFF00')">&nbsp;</td>
        <td style="width: 10px; background-color: #FF0000;" id="td2" onClick="changeBGColor('td2', '#FFFF00')">&nbsp;</td>
        <td style="width: 10px; background-color: #00FF00;" id="td3" onClick="changeBGColor('td3', '#FFFF00')">&nbsp;</td>
        <td style="width: 10px; background-color: #0000FF;" id="td4" onClick="changeBGColor('td4', '#FFFF00')">&nbsp;</td>
    </tr>
</table>
Vielleicht bringt Dich das weiter.

Ciao
Quaese
 
Hm... is ja ganz nett, funktionieren tut es aber eigentlich nicht (aber es gibt wenigstens auch keinen Error aus)!

Im Internet Explorer (6):

Immer wenn ich was markiere, bekommt IRGENDEIN HTML-objekt diese hintergrundfarbe... einmal dieses <td>, mal jenes, mal das <img>, einmal ein Formularobjekt ... aber nie das richtige, ausgewählte <td> ...

Im Opera:

Gähnende Leere: es tut sich gar nix...

Vl kommen wir ja noch drauf!?
 
Zuletzt bearbeitet:
Hallo,

also bei mir funktioniert das wunderbar (Opera 7.22, Netscape 7.1, IE 4, IE 5.01, IE 5.5 und IE 6 sowie im Mozilla 1.6).
Die Zelle, die ich anklicke, wird gelb, die zuvor gelbe erhält ihre ursprüngliche Farbe.

Hast Du in den Zellen etwas eingetragen?
Zum Beispiel: &nbsp; für ein Leerzeichen.

Hast Du eindeutige ID's in den Zellen, die Du ändern willst?

Quaese
 
Bei mir ist das so:

Im Opera:
Die Zelle die ich anklicke ändert ihre Farbe. Diese wird dann nicht mehr umgeändert.

Im IE:
Gar nix...

MfG,
Reddie

P.S.: Eigentlich wollte ich, dass es nur die <td> einer <tr> betrifft, also nur eine <td> der <tr> kann ihre Farbe wechseln, die anderen sind gleich. Klicke ich auf eine andere, verändert sich die vorher andersfärbige wieder zurück und die angeklickte wird andersfärbig....
 
Zuletzt bearbeitet:
Hi,

ich habe Dir das Dokument, das bei mir problemlos funktioniert, in den Anhang gepackt.
Schau's Dir mal an.

Ciao
Quaese
 
Es funktioniert "genauso wie ich es gedacht habe", allerdings nicht so wie ich es wollte...

Eigentlich sollte man für jedes <tr> noch eine id mitgeben, die auch als dritter parameter mitwandert und als array-schlüssel dient.

Jetzt:
Es funktioniert so, dass man ein <td> in einer <table> klickt, dieses ändert die farbe, und das vorher angeklickte bekommt wieder die ausgangsfarbe

Wie es sein sollte:
Genauso wie oben, nur wird nicht ein objekt als oldObjekt belegt, sondern eines pro <tr> (mit array eben), so kann ein <td> pro <tr> eine andere farbe haben als die anderen...


MfG
Reddie
 
schön und gut und funktioniert auch...

aber in der praxis sind in dem html-dokument mehr als diese eine tabelle und mehr objekte als in der probe-version.

resultat: klicke ich ein feld an, ändert sich die hintergrundfarbe IRGEND eines anderen OBJEKTES (hab sogar damit die hintergrundfarbe der ganzen seite geändert...)


Was kann man noch machen?

EDIT:

Hab das Problem gefunden! Ich hatte für die IDs nur Zahlen gesetzt. Nachdem ich einfach noch einen Buchstaben davorgesetzt hatte funktionierte das ganze Script!

Danke vielmals!

Reddie
 
Zuletzt bearbeitet:
Hallo...

wenn du dir nen Haufen Schreibarbeit ersparen willst, kannst du es auch so probieren:
Code: 
<script type="text/javascript">
<!--
//Farben...(normal,markiert)
arrColors=new Array('white','red');

arrRows=new Array();
function init_events()
{
tbl=document.getElementById('myTable');
for(var r=0;r<tbl.rows.length;++r)
    {
    arrRows[r]=new Array();
    for(var c=0;c<tbl.rows[r].cells.length;++c)
        {
        arrRows[r].push(tbl.rows[r].cells[ c]);
        tbl.rows[r].cells[ c].onclick=new Function('F','highlight(this,'+r+')');
        }
    }
}
function highlight(o,r)
{
for(c=0;c<arrRows[r].length;++c)
    {
    arrRows[r][ c].style.backgroundColor=(o!=arrRows[r][ c])?arrColors[0]:arrColors[1]
    }
}
if(document.getElementById)
    {
    window.onload=init_events;
    }
//-->
</script>

... deiner Tabelle musst du nur die ID "myTable" geben... der Rest geht von alleine.... keine IDs und Funktionsaufrufe in den Zellen ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück