Skift farve på celler

Flere klasser er helt tilladt, så det kan ikke blive et problem (class="myRed w100px" !-)

-- men ellers kan du f.eks. gøre sådan:

<script type="text/javascript">
var oldElm = null;
function mClick(elm){
  var state = elm.style.backgroundColor == "";
  if(oldElm)
    oldElm.style.backgroundColor = "";
  elm.style.backgroundColor = state ? "#c9f" : "";
  oldElm = elm;
}
</script>

<style type="text/css">
.minTabel{border-collapse:collapse;}
.minTabel tr{background-color:#fc0;cursor:pointer;}
.minTabel td{padding: 4px;margin:4px;}
.minTabel .even{background-color:#fc7;}
.redText{color:red;}
.boldText{font-weight:900;}
</style>

<table class="minTabel">
  <tr class="redText" onclick="mClick(this);">
    <td>Celle 1, række 1</td>
    <td>Celle 2, række 1</td>
    <td>Celle 3, række 1</td>
    <td>Celle 4, række 1</td>
  </tr>
  <tr class="even boldText" onclick="mClick(this);">
    <td>Celle 1, række 2</td>
    <td>Celle 2, række 2</td>
    <td>Celle 3, række 2</td>
    <td>Celle 4, række 2</td>
  </tr>
  <tr onclick="mClick(this);">
    <td>Celle 1, række 3</td>
    <td>Celle 2, række 3</td>
    <td>Celle 3, række 3</td>
    <td>Celle 4, række 3</td>
  </tr>
  <tr class="even redText" onclick="mClick(this);">
    <td>Celle 1, række 4</td>
    <td>Celle 2, række 4</td>
    <td>Celle 3, række 4</td>
    <td>Celle 4, række 4</td>
  </tr>
</table>

Spm: Skal det forståes således at man godt kan bruge flere class navne på samme element, blot adskilt med mellemrum i defitionen?

Kan det undgåes at farven ikke skifter til standardfarven hvis TD'en allerede er markeret? Jeg skal bruge det til et internt mailsystem og den markerede TD for den aktuelle mail skulle gerne forblive markeret selvom man klikker flere gange!

Kommentar: jeg har lige siddet og studeret lidt om css. For at en css definition skal skrives rigtig skal..

color:red;} <!-- skrives således -->
color: red;}

og...
.minTabel{border-collapse:collapse;} <!-- skrives således -->
.minTabel{border-collapse: collapse;}

w3c's css validator skulle melde fejl hvis der ikke laves mellemrum (har ikke prøvet det!)

Hvad nu hvis jeg også vil skifte fonten på hele rækken til normal (skal forblive således!).

1. Ja, det er præcis det man kan !-)

2. Så skal du sætte en ekstra betingelse, men man kan altså godt !o]

3. Nej, whitespace i css-regler skal overses medmindre de har en betydning, så det er et fedt:

Ligegyldigt:

color:red;
color: red;

Betyder noget:

border:1px solid black;

-- og hvis du vil ændre font-style eller font-weight, gør du det bare i funktionen !-)

Jeg har prøvet at skifte fontweight på alverdens måder, men intet har effekt.

For at undgå skiftning tilbage til std farver ville jeg mene at
if(oldElm)
... skulle skiftes til noget lign.
if(oldElm <> elm)
... eller
if(oldElm != elm)

... men intet virker! Mit kenskab til scripts kan ligge på et meget lille sted.

fontWeight !-)

-- og så skal du forklare hvordan du vil have det fungerer ...

-- hvis klik skal aktivere en celle, og den derefter skal deaktiveres, eller hvordan ?-)

Kan flere celler være aktive ?o]

Listen af mails bliver hentet fra MySql. De mails der er blevet læst vises i maillisten med font-Weight = 'normal'. Ulæste vises med 'bold'. Dette sættes via PHP med eksempelvis:
<h4 style="font-weight: <?php if ( $row[$mitnavn] == "Læst" ) { echo "normal;"; } else { echo "bold;";}?>">

Der er i alt 4 kolonner: Fra, Til, Dato, og Emne. Ovenstående er koden for "Til". Alle cellebaggrunde er som standard hvide. Klikkes der på en mail, hvadenten det er i kolonnen Fra, Til, Dato, eller Emne sakl der ske 4 ting:

1. Der skrives en værdi i MySql at mailen er læst. Det har jeg lavet

2. I et textarea skrives indholdet af mailen. I et Input Type text skrives emnet. Det er lavet

3. Bg-farven på rækken på mailen skal skifte til eksempelvis grå for at vise at det er den mail man har klikket på. Det har du delvis hjulpet med i ovenstående kode. Her er problemet at hvis du klikker 2 gange på samme række, altså inden for samme tr, skifter farven tilbage igen, hvilket jo ikke duer da man så ikke kan se hvilken mail der er markeret!

4. Indtil i dag havde jeg bare lavet det sådan at man skulle klikke på emnet for at få vist mailen. Visuelt skiftede jeg så bare fonten med: <h4 onclick="this.style.fontWeight='normal';">. Men da du med din kode har lavet det så smart at baggrundsfarven skifter ved klik i tr i stedet for en enkelt td, skal jeg også have skiftet bold til normal i hele rækken, altså alle 4 celler i en række.

Her er hvordan tablen er vist (jeg har pillet en del så kig ikke for meget på syntax'en):

<table class="mailtabel" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" background="/vif/pics/bg1.jpg" style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;"><h2>Fra</h2></td>
    <td align="center" background="/vif/pics/bg1.jpg" style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;"><h2>Til</h2></td>
    <td align="center" background="/vif/pics/bg1.jpg" style="border-top: 1px solid #000000; border-bottom: 1px solid #000000;"><h2>Dato</h2></td>
    <td align="center" background="/vif/pics/bg1.jpg" style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;"><h2>Emne</h2></td>
  </tr>
  <tr id="39" onclick="this.style.fontWeight='bold'; mClick(this); besvar = 'Re:&nbsp;Hej\n'; TilAuthor = 'Gert Kühne'; TekstMail = ''; Aktuel = '39'; skrivlaesttildb(this,'Alex Grove Kühne');MM_setTextOfTextfield('Mail','', TekstMail); " bgcolor="#FFFFFF" >
  <td height="1" nowrap style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;">
    <h4>&nbsp;Person 1&nbsp;</h4>
  </td>
  <td nowrap style="border-bottom: 1px solid #000000; ">
    <h4>&nbsp;Person 2&nbsp;</h4>
  </td>           
  <td nowrap class="redText" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;">
    <h4>&nbsp;14/10-2005&nbsp;00:32:28</h4>
  </td>
  <td nowrap class="redText" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;">
    <script>var TilAuthor = ""; var besvar = "Ingen at besvare til! Vælg først en mail ovenfor!"; var TekstMail = "";  var Aktuel = "";</script>
    <h4 style="font-weight: normal;">&nbsp;Hej&nbsp;</h4>
  </td>
  </tr>
  <tr id="39" onclick="this.style.fontWeight='bold'; mClick(this); besvar = 'Re:&nbsp;Hej\n'; TilAuthor = 'Gert Kühne'; TekstMail = ''; Aktuel = '39'; skrivlaesttildb(this,'Alex Grove Kühne');MM_setTextOfTextfield('Mail','', TekstMail); " bgcolor="#FFFFFF" >
  <td height="1" nowrap style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;">
    <h4>&nbsp;Person 1&nbsp;</h4>
  </td>
  <td nowrap style="border-bottom: 1px solid #000000; ">
    <h4>&nbsp;Person 2&nbsp;</h4>
  </td>           
  <td nowrap class="redText" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;">
    <h4>&nbsp;14/10-2005&nbsp;00:32:28</h4>
  </td>
  <td nowrap class="redText" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;">
    <script>var TilAuthor = ""; var besvar = "Ingen at besvare til! Vælg først en mail ovenfor!"; var TekstMail = "";  var Aktuel = "";</script>
    <h4 style="font-weight: normal;">&nbsp;En mail</h4>
  </td>
  </tr>
  <tr id="39" onclick="this.style.fontWeight='bold'; mClick(this); besvar = 'Re:&nbsp;Hej\n'; TilAuthor = 'Gert Kühne'; TekstMail = ''; Aktuel = '39'; skrivlaesttildb(this,'Alex Grove Kühne');MM_setTextOfTextfield('Mail','', TekstMail); " bgcolor="#FFFFFF" >
  <td height="1" nowrap style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;">
    <h4>&nbsp;Person 3</h4>
  </td>
  <td nowrap style="border-bottom: 1px solid #000000; ">
    <h4>&nbsp;Person 2&nbsp;</h4>
  </td>           
  <td nowrap class="redText" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;">
    <h4>&nbsp;14/10-2005&nbsp;00:32:28</h4>
  </td>
  <td nowrap class="redText" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;">
    <script>var TilAuthor = ""; var besvar = "Ingen at besvare til! Vælg først en mail ovenfor!"; var TekstMail = "";  var Aktuel = "";</script>
    <h4 style="font-weight: normal;">&nbsp;Husk lige!!!</h4>
  </td>
  </tr>
</table>

Re 18/10-2005 02:05:45:

1. Hvis skrivningen til databasen skal foregå, skal der jo laves en kontakt til serveren, den kan jo kun klares ved at submitte (eller en eller anden http-request !-)

3 + 4. Så skal vi jo bare fjerne tilbage-tingen, som jeg troede var nødvendig og tilføje normal font-weight:

<script type="text/javascript">
var oldElm = null;
function mClick(elm){
  if(oldElm)
    oldElm.style.backgroundColor = "";
  elm.style.backgroundColor = "#c9f";
  elm.style.fontWeight = 'normal';
  oldElm = elm;
}
</script>

Jeg har nu løst det med skift af fonten på hele td'en, så nu gælder det baggrundsfarven!

skrivlaesttildb() er en funktion som loader en 1*1 pix fra et php script og dette script skriver til DB, så jeg laver ingen submit! Der sker ingen reload af siden.

Min function ser nu således ud:

var oldElm = null;
function mClick(elm){
  var state = elm.style.backgroundColor == "";
  if(oldElm)
    oldElm.style.backgroundColor = "";
      elm.style.backgroundColor = state ? "#EBEBEB" : "";
    oldElm = elm;
}

Det der sker her er at man skifter baggrundsfarven UANSET HVAD! og det skal den IKKE! Den skal kun skifte hvis den ikke allerede er skiftet. Altså noget lignende dette:

var oldElm = null;
function mClick(elm){
  var state = elm.style.backgroundColor == "";
  if(oldElm AND oldElm<>elm)
    oldElm.style.backgroundColor = "";
    elm.style.backgroundColor = state ? "#EBEBEB" : "";
    oldElm = elm;
}
Men jeg KAN SIMPELTHEN ikke finde ud af hvordan syntaxen i JavaScript fungerer. Jeg har nok brugt 5-6 timer på at finde ud af hvordan jeg skriver 2 betingelser i en if-sætning, men jeg får fejl uanset hvad!

if(oldElm AND oldElm<>elm)

if(oldElm && oldElm!=elm)

if(oldElm) {
if (oldElm<>elm)
  "kode"
}}

Jeg har prøvet alverdens muligheder efter at have studeret en masse koder. Det eneste jeg ikke har fundet er en JavaScript Resource side hvor man kan læse lidt om JavaScript programmering. En side som er hvad php.net er for PHP.

¿No comprende ?-)

-- som koden står 22/10-2005 04:02:47 skifter baggrundsfarven kun, hvis man klikker et andet sted ...

Jeg får den sædvanlige fejl: Et objekt var ventet.

Tjah, det virker, når jeg prøver det, så måske du kan smide et link til det, der ikke virker ?-)

Hmmm. Jeg har længe skrevet at det nu virker!

?o]

Giver du et svar

Oki '-)

-- og tak for point ;~}