Tijden veranderen
Hightlight
Mijn vraag, ik heb een tabel met meerdere rijen en nu wil ik dat als ik over een rij ga de achtergrond kleur van die rij veranderd (opzich niet zo moeilijk) alleen nu komt het, wil ik dit ook voor meerder rijen dus als ik met mijn muis over bv. rij 3 ga dat rij 5 7 en 10 ook veranderen van achtergrond kleur. Hoe moet dit en is dit uberhaupt mogelijk?
alvast bedankt!
(als deze vraag niet binnen het profiel van phphulp past omdat het misschien niks met php te maken heeft is het prima als 1 van de moderators deze verwijderd)
Gewijzigd op 01/01/1970 01:00:00 door Johan
en probeer het de volgende keer in webdesign te zetten....
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..
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?
Ten eerste, de CSS code te plaatsen in een stylesheet :
Code (php)
1
2
2
.notselected{background-color: white;}
.selected{background-color: red;}
.selected{background-color: red;}
Dan ergens deze javascript in de header of body plaatsen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>
<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..
Gewijzigd op 01/01/1970 01:00:00 door Danny Roelofs
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.
CSS is niet veel verandert, alleen even een kleur verandert:
Code (php)
1
2
3
4
2
3
4
<style>
.notselected{background-color: gray;}
.selected{background-color: green;}
</style>
.notselected{background-color: gray;}
.selected{background-color: green;}
</style>
Javascript kent nu een 2de functie, en de oude highlight is aangepast.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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>
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?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>';
?>
// 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.
Gewijzigd op 01/01/1970 01:00:00 door Danny Roelofs