[JS] bgcolor toggle

[Scr33x0r]

Hey,

ik heb een vraagje aan jullie, ik probeer een table te maken waarvan rijen zijn te selecteren en weer te deselecteren, de geselecteerden krijgen een andere kleur uiteraard (net zo als in phpmyadmin) echter, ik kom er niet uit.

dit is het javascript dat ik gebruik:

code:

function change(rowID,color,oldcolor)
{
    theRow = document.getElementById(rowID);
    currentColor = theRow.style.background;
    if(currentColor != color)
    {
        newColor = color;
    } else {
        newColor = oldcolor;
    }
    theRow.style.background = newColor;
}

nu wordt ie wel de color zeg maar, maar niet weer terug, wat doe ik fout? Dit is de volledige code incl html:

code:

<script language="javascript">
function change(rowID,color,oldcolor)
{
    theRow = document.getElementById(rowID);
    currentColor = theRow.style.background;
    if(currentColor != color)
    {
        newColor = color;
    } else {
        newColor = oldcolor;
    }
    theRow.style.background = newColor;
}
</script>

<table width="100%"  border="0" class="image" cellpadding="0" cellspacing="0">
  <tr class="gradient_header">
    <td width="39%">Gebruikersnaam:</td>
    <td width="34%">Laatste Login: </td>
  </tr>
  <tr bgcolor="#FFFFFF" onClick="change('0','#D9EAF2','#FFFFFF');" id="0">
    <td>a.devreede</td>
    <td>02-06-2005 21:16</td>
  </tr>
  <tr bgcolor="#F2F2F2" onClick="change('1','#D9EAF2','#F2F2F2');" id="1">
    <td>a.kleef</td>
    <td>30-05-2005 00:24</td>
  </tr>
  <tr bgcolor="#FFFFFF" onClick="change('2','#D9EAF2','#FFFFFF');" id="2">
    <td>brinkman</td>
    <td>02-06-2005 11:10</td>
  </tr>
  <tr bgcolor="#F2F2F2" onClick="change('3','#D9EAF2','#F2F2F2');" id="3">
    <td>j.w.haveman</td>
    <td>02-06-2005 11:21</td>
  </tr>
  <tr bgcolor="#FFFFFF" onClick="change('4','#D9EAF2','#FFFFFF');" id="4">
    <td>m.graber</td>
    <td>30-05-2005 10:57</td>
  </tr>
  <tr bgcolor="#F2F2F2" onClick="change('5','#D9EAF2','#F2F2F2');" id="5">
    <td>r.dehaas</td>
    <td>02-06-2005 19:04</td>
  </tr>
</table>

[faabman]

in HTML mag je ID niet met een nummer beginnen...

Ik denk overigens dat je beter met meer script kunt werken. Waarbij je:

• de onclick, de bgcolor en de id uit je html haalt
• een javascript functie schrijft die een heleboel van deze functies

JavaScript:

var objSelectedRow = null;

var objTable = document.getElementById('table');
var objRow, arrRows = objTable.getElementsByTagName('tr');

var blnEven = true;

for(var i = 0; i < arrRows.length; i++){
  objRow = arrRows[i];
  
  if(blnEven){
    objRow.className = 'even' ;
    blnEven = false;
  }else{
    objRow.className = 'odd' ;
    blnEven = true;
  }
  
  objRow.onclick = function(){
   if(objSelectedRow){  objSelectedRow.className = objSelectedRow.className.replace('selected', '')  };
    this.className += ' selected';

    objSelectedRow = this;
  }
}

dit script plaats je (net als de bijbehorende CSS) in een extern document en je hebt een snellere, bandbreedte besparende en werkende (zie disclaimer ) optie

disclaimer:
heb niet getest of syntax gecontroleerd...

[Scr33x0r]

Ik had sowieso ff puur alles in 1 gedaan, gebruik normaal php functie voor het om en om doen van een tr bgcolor, in iedergeval, javascript is nieuw voor me, en ik snap dat van jou dus niet helemaal, ik heb nu het volgende:

code:

<style type="text/css">
.selected {
    background-color:#00FFFF;
}
.even {
    background-color:#CCCCCC;
}
.odd {
    background-color:#FFFFFF;
}
</style>

<script language="javascript">
function change()
{
    
    var objSelectedRow = null;
    
    var objTable = document.getElementById('table');
    var objRow, arrRows = objTable.getElementsByTagName('tr');
    
    var blnEven = true;
    
    for(var i = 0; i < arrRows.length; i++){
      objRow = arrRows[i];
      
      if(blnEven){
        objRow.className = 'even' ;
        blnEven = false;
      }else{
        objRow.className = 'odd' ;
        blnEven = true;
      }
      
      objRow.onclick = function(){
       if(objSelectedRow){  objSelectedRow.className = objSelectedRow.className.replace('selected', '')  };
        this.className += ' selected';
    
        objSelectedRow = this;
      }
    }
}
</script>

<table width="100%"  border="0" class="image" cellpadding="0" cellspacing="0" id="table">
  <tr class="gradient_header">
    <td width="39%">Gebruikersnaam:</td>
    <td width="34%">Laatste Login: </td>
  </tr>
  <tr class="selected" id="a0" onClick="change();">
    <td>a.devreede</td>
    <td>02-06-2005 21:16</td>
  </tr>
  <tr class="odd" id="a1" onClick="change();">
    <td>a.kleef</td>
    <td>30-05-2005 00:24</td>
  </tr>
  <tr class="selected" id="a2" onClick="change();">
    <td>brinkman</td>
    <td>02-06-2005 11:10</td>
  </tr>
  <tr class="odd" id="a3" onClick="change();">
    <td>j.w.haveman</td>
    <td>02-06-2005 11:21</td>
  </tr>
  <tr class="selected" id="a4" onClick="change();">
    <td>m.graber</td>
    <td>30-05-2005 10:57</td>
  </tr>
  <tr class="odd" id="a5" onClick="change();">
    <td>r.dehaas</td>
    <td>02-06-2005 19:04</td>
  </tr>
</table>

nogmaals: allemaal 1 in puur om te testen

[faabman]

Je moet mijn functie niet uitvoeren bij de onclick... Als je goed leest dan zie je in mijn script ook al een onclick staan, die vangt jou onclick af...

Roep mijn functie inline aan nadat de tabel is geladen (de call dus in de source achter de tabel plaatsen) en je kunt de onclick en de id alsnog laten vallen...

[crisp]

Om even terug te komen op wat er fout gaat in TS's eigen functie: je moet de backgroundColor property opvragen ipv de background property. (En inderdaad id's niet met een cijfer laten beginnen)

faabman: jouw oplossing is inderdaad unobtrusive; het enige jammere is dat class-swaps relatief traag zijn.

[ Voor 10% gewijzigd door crisp op 03-06-2005 10:13 ]

[Scr33x0r]

Ik heb het inmiddels opgelost met het swappen van classes, ook op dezelfde manier als mijn eigen script. In iedergeval bedankt