onclick tabelregel van kleur laten veranderen
Ik heb een tabel op mijn pagina staan in het bovenste frame. Hierin laat ik gegevens zien (voornaam, achternaam) uit mijn database. Nu wil ik in het onderste frame detailgegevens laten zien van van de persoon die in het bovenste frame is aangeklikt. Op dit moment heb ik van elke waarde in de tabel (dus voor en achternaam) een linkje gemaakt. Wat ik eigelijk wil is dat de hele regel van de tabel (voor het oog) geselecteerd wordt en van kleur veranderd op het moment dat er ergens op de regel geklikt wordt. Dat je dus een blauwe balk ziet voor de geselecteerde regel. Op het moment dat je op een andere regelklikt moet die blauw worden en de voorgaande weer gewoon terug naar de originele kleur.
Feitelijk moet de bgcolor dus veranderen bij onclick maar dan voor de hele regel. Iemand een idee hoe ik dit voor elkaar krijg?
Groetjes uit Australie!
Ik geloof dat je de td's allemaal apart moet kleuren. Dus de td's allemaal een naam met ID meegeven en aan de hand van een functie(ID) de kleuren veranderen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
function ChangeIt(id) {
document.getElementById('eerste'+id).bgcolor='#iets';
document.getElementById('tweede'+id).bgcolor='#iets';
document.getElementById('derde'+id).bgcolor='#iets';
}
</script>
en dan:
<table>
<tr><td id="eerste1"></td><td id="tweede1"></td></tr>
<tr><td id="eerste2"></td><td id="tweede2"></td></tr>
<tr><td id="eerste3"></td><td id="tweede3"></td></tr>
</table>
<iets onClick="ChangeIt(2);">
function ChangeIt(id) {
document.getElementById('eerste'+id).bgcolor='#iets';
document.getElementById('tweede'+id).bgcolor='#iets';
document.getElementById('derde'+id).bgcolor='#iets';
}
</script>
en dan:
<table>
<tr><td id="eerste1"></td><td id="tweede1"></td></tr>
<tr><td id="eerste2"></td><td id="tweede2"></td></tr>
<tr><td id="eerste3"></td><td id="tweede3"></td></tr>
</table>
<iets onClick="ChangeIt(2);">
Groeten uit Zuid-Holland
Gewijzigd op 08/03/2006 04:04:00 door PHP erik
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?
<table>
<tr id="test" bgcolor="blue" onClick="ChangeIt(1)"><td>cel2</td>
<td>cel2</td></tr>
</table>
<script>
function ChangeIt(id) {
document.getElementById("test2").fillcolor="red";
}
</script>
<p><!--[if gte vml 1]><v:oval id="test2"
o:spid="_x0000_s1025" style='position:absolute;left:36.75pt;top:79.5pt;
width:42pt;height:26.25pt;z-index:1'/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:1;left:48px;top:105px;
width:58px;height:37px'><img width=58 height=37
src="new_page_190_files/image001.gif" v:shapes="test2"></span><![endif]></p>
?>
<table>
<tr id="test" bgcolor="blue" onClick="ChangeIt(1)"><td>cel2</td>
<td>cel2</td></tr>
</table>
<script>
function ChangeIt(id) {
document.getElementById("test2").fillcolor="red";
}
</script>
<p><!--[if gte vml 1]><v:oval id="test2"
o:spid="_x0000_s1025" style='position:absolute;left:36.75pt;top:79.5pt;
width:42pt;height:26.25pt;z-index:1'/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:1;left:48px;top:105px;
width:58px;height:37px'><img width=58 height=37
src="new_page_190_files/image001.gif" v:shapes="test2"></span><![endif]></p>
?>
Hierbij kleurt het ovaaltje rood als ik op de tabelrij klik. Als ik echter hetvolgende doe:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<?
<table>
<tr id="test" bgcolor="blue" onClick="ChangeIt(1)"><td>cel2</td>
<td>cel2</td></tr>
</table>
<script>
function ChangeIt(id) {
document.getElementById("test").bgcolor="red";
}
</script>
?>
<table>
<tr id="test" bgcolor="blue" onClick="ChangeIt(1)"><td>cel2</td>
<td>cel2</td></tr>
</table>
<script>
function ChangeIt(id) {
document.getElementById("test").bgcolor="red";
}
</script>
?>
Dan gebeurd er niks. Het lijkt dus wel alsof ik mijn tabelrij geen "id" kan geven. Terwijl dit wel moet kunnen.....Wat doe ik verkeerd?
(ow ja natuurlijk zonder de
Code (php)
1
<? en ?>
Gewijzigd op 08/03/2006 07:20:00 door Sandra
je kan trouwens ook de tags [ c o d e ] en [ / c o d e ] gebruiken om zo'n blokje te krijgen
edit:
viel in de herhaling
Gewijzigd op 08/03/2006 09:56:00 door Terence Hersbach
<table>
<tr id="test" bgcolor="blue" onClick="ChangeIt(this)"><td>cel2</td>
<td>cel2</td></tr>
</table>
<script>
function ChangeIt(obj) {
obj.bgColor = "#f00";
}
</script>
?>
Nu wil ik echter nog dat wanneer er een andere regel geselecteerd wordt de eerder geselecteerde weer terug springt naar zijn originele kleur.
bijv:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table id="tabel">
<tr id="test" bgcolor="red" onClick="ChangeIt(this)"><td>cel1</td>
<td>cel2</td></tr>
<tr id="klok" bgcolor="red" onClick="ChangeIt(this)"><td>cel1</td>
<td>cel2</td></tr>
<tr id="klepel" bgcolor="red" onClick="ChangeIt(this)"><td>cel1</td>
<td>cel2</td></tr>
</table>
<script>
function ChangeIt(obj) {
obj.bgColor = "#235CDB";
test.bgColor = "red";
}
</script>
<tr id="test" bgcolor="red" onClick="ChangeIt(this)"><td>cel1</td>
<td>cel2</td></tr>
<tr id="klok" bgcolor="red" onClick="ChangeIt(this)"><td>cel1</td>
<td>cel2</td></tr>
<tr id="klepel" bgcolor="red" onClick="ChangeIt(this)"><td>cel1</td>
<td>cel2</td></tr>
</table>
<script>
function ChangeIt(obj) {
obj.bgColor = "#235CDB";
test.bgColor = "red";
}
</script>
Werk niet... Iemand een idee
Gewijzigd op 08/03/2006 12:43:00 door Sandra
Deze doe ik dicht!
Dit topic is gesloten.