Hightlight

ja dat moet wel kunnen met javascript.

en probeer het de volgende keer in webdesign te zetten....

Nou voorlopig, gezien als ik je vraag zou beantwoorden middels CSS en Javascript verplaats ik hem richting webdesign.

Maar ik zal er zo wel even op terug komen, ben toch op dit moment bezig met mijn eigen project en geknutsel met javascript, dus dan kan ik daar wel wat voor bedenken..

Super dankjewel!! ik zal de volgende keer beter kijken waar ik topics open, mijn excuus!

na wat googlen heb ik dit

<script type="text/javascript">
function trColor(elementId) {
if (document.getElementById) {
document.getElementById(elementId).style.backgroundColor="#ffdddd"
}
}
function trColorOff(elementId) {
if (document.getElementById) {
document.getElementById(elementId).style.backgroundColor=""
}
}
</script>

Alleen dat is voor 1 rij/ 1 id. Kan het misschien ook via name= of werkt dat ook maar voor 1 rij?

Nou ik heb dit voor je in elkaar geflanst.

Ten eerste, de CSS code te plaatsen in een stylesheet :

.notselected{background-color: white;}
.selected{background-color: red;}

Dan ergens deze javascript in de header of body plaatsen:

<script>
function highlight(strNumbers,id)
{

	var arrNumbers = new Array();
	arrNumbers = strNumbers.split(" ");
	

 if(document.getElementsByTagName)
 {  
 
   var table = document.getElementById(id);  
   var rows = table.getElementsByTagName("tr");  

   for(i = 0; i < rows.length; i++)
   {
    rows[i].className = "notselected";
   }
   for(i = 0; i < rows.length; i++)
   {          
	 for(j = 0; j < arrNumbers.length; j++)
	 {
	 	if ( i == ( parseInt(arrNumbers[j]) - 1))
		{
		 rows[i].className = "selected";
		}
	 
	 }

   }      
 }

}
</script>

Dan ergens in je body, deze tabel:

<table id="voorbeeld" class="" width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td onmouseover="javascript:highlight('1 3 5 9','voorbeeld');">regel 1</td>
  </tr>
  <tr>
    <td onmouseover="javascript:highlight('2 4 6 7 8','voorbeeld');">regel 2</td>
  </tr>
  <tr>
    <td onmouseover="javascript:highlight('1 3 5 9','voorbeeld');">regel 3</td>
  </tr>
  <tr>
    <td onmouseover="javascript:highlight('2 4 6 7 8','voorbeeld');">regel 4</td>
  </tr>
  <tr>
    <td onmouseover="javascript:highlight('1 3 5 9','voorbeeld');">regel 5</td>
  </tr>
  <tr>
    <td onmouseover="javascript:highlight('2 4 6 7 8','voorbeeld');">regel 6</td>
  </tr>
  <tr>
    <td onmouseover="javascript:highlight('2 4 6 7 8','voorbeeld');">regel 7</td>
  </tr>
  <tr>
    <td onmouseover="javascript:highlight('2 4 6 7 8','voorbeeld');">regel 8</td>
  </tr>
  <tr>
    <td onmouseover="javascript:highlight('1 3 5 9','voorbeeld');">regel 9</td>
  </tr>
</table>

En dan moet je zelf, met php de regel nummers bepalen, welke waar komt.

Toevoeging:

Voor vandaag in iedergeval kun je het werkend zien op deze link (zit even in mijn project verweven nu) : Link

PS: Je kan geen problemen veroorzaken als je daar bent, je kan niets verkeerd doen als je ergens op klikt..

Helemaal top, echt super bedankt dit is precies wat ik zoek!!

Alleen de maar jammer genoeg, ik heb geen idee hoe ik met php die rij nummer in moet krijgen. In de tabel staan cursisten en nu wil ik graag alle cursisten van hetzelfde bedrijf die op dezelfde dag een cursus gevolgd hebben higlighten. (dus groepen zeg maar) De cursisten komen weer uit een database. Hoe zal ik dit aan moeten pakken??

Je hoeft niet nog een heel script te maken hoor, ik ben al super blij met dit!! Ik moet er zelf ook wat voor doen vind ik. Dus als jij of iemand anders mij een beetje kan sturen ben ik jullie onwijs (en nog meer :D) dankbaar.

Denk het te hebben voor je, maar ik plaats dan even alles opnieuw gezien er wat veranderingen zijn:

CSS is niet veel verandert, alleen even een kleur verandert:

<style>
 .notselected{background-color: gray;}
 .selected{background-color: green;}
</style>

Javascript kent nu een 2de functie, en de oude highlight is aangepast.

<script>


function clearhighlight(id)
{

if(document.getElementsByTagName)
 {  
 
   var table = document.getElementById(id);  
   var rows = table.getElementsByTagName("tr");  

   for(i = 0; i < rows.length; i++)
   {
    rows[i].className = "notselected";
   }
}
}

function highlight(strNumbers,id)
{

	var arrNumbers = new Array();
	arrNumbers = strNumbers.split(" ");
	

 if(document.getElementsByTagName)
 {  
 
   var table = document.getElementById(id);  
   var rows = table.getElementsByTagName("tr");  

   for(i = 0; i < rows.length; i++)
   {
    rows[i].className = "notselected";
   }
   for(i = 0; i < rows.length; i++)
   {          
	 for(j = 0; j < arrNumbers.length; j++)
	 {
	 	if ( i == ( parseInt(arrNumbers[j]) ))
		{
		 rows[i].className = "selected";
		}
	 
	 }

   }      
 }

}


</script>

En dan de php code:

<?php
// het aantal gegevens in beide arrays moeten dan wel hetzelfde zijn:
$medewerkers 		= array('jan','piet','kees', 'wim','mario','stefan');
// 0 = niet voltooid, 1 = wel voltooid.
$cursusvoltooid		= array(0,1,0,1,1,0);



echo '<table id="voorbeeld" class="" width="100" border="0" cellspacing="0" cellpadding="0">';

foreach($cursusvoltooid as $key => $inhoud)
{
 if ($inhoud == 1)
 {
	 $welke_regels_wel =  $welke_regels_wel . $key . " ";
 }

}


foreach($cursusvoltooid as $key => $inhoud)
{
 if ($inhoud == 1)
 {
	echo '<tr>	<td onmouseout= "javascript:clearhighlight(\'voorbeeld\')" onmouseover="javascript:highlight(\''.$welke_regels_wel.'\',\'voorbeeld\');">'.$medewerkers[$key].'</td>  </tr>';
 }
 if ($inhoud == 0)
 {
	echo '<tr>	<td >'.$medewerkers[$key].'</td>  </tr>';
 }

}


echo '<table>';


?>

Ik denk dat je misschien nu een idee krijgt..

Het is trouwens wel even allemaal houtje - touwtje knutsel werk, de uiteindelijk verwerking en orde & netheid laat ik aan jou over ;-)

Hopelijk benadert het je doel, of in ieder geval weer een duwtje in de goede richting.