Notifikationer

Markér alle som læst Log ud

bluegene Nybegynder

10. maj 2003 - 01:14 Der er 13 kommentarer og
1 løsning

set baggrunds farve ved klik

Jeg har 4 forskellige celler i en tabel, meningen er så at hvis jeg klikker på felt 2 skal cellen farves grøn, hvis jeg så derefter klikker på felt 4 skal denne farves grøn og farven skal forsvinde fra felt 2 osv. hvordan laver man sådan noget ?

mine tabel ser ud som følgende

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="17%" height="50">
<tr>
<td width="50%" height="50" align="center"><b><font size="2"> 1</font></b></td>
<td width="50%" height="50" align="center"><b><font size="2">
2</font></b></td>
</tr>
<tr>
<td width="50%" height="50" align="center"><b><font size="2">
3</font></b></td>
<td width="50%" height="50" align="center"><b><font size="2">
4</font></b></td>
</tr>
</table>

Synes godt om

roenving Novice

10. maj 2003 - 01:27 #1

Kort:
onclick --> style.backgroundColor="Green" -- alle andre td'er --> style.backgroundColor=""

Synes godt om

roenving Novice

10. maj 2003 - 01:31 #2

Hvis det er din eneste tabel, så er det helt overskueligt:

en onClick="makeGreen(this);"

og så en funktion i <head>:

function makeGreen(t){
var tds = document.getElementsByTagName("td");
for (i=0;i<tds.length;i++) {
tds.style.backgroundColor="#FFFFFF";
}
this.style.backgroundColor="#00FF00"
}

hth
jes

Synes godt om

roenving Novice

10. maj 2003 - 01:37 #3

Selvfølgelig en enkelt småfejl (eller to ...):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>Cellefarve</title>



<link rel="stylesheet" type="text/css" href="style/style.css">

<script language="javascript" type="text/javascript">
function makeGreen(t){
var tds = document.getElementsByTagName("td");
for (i=0;i<tds.length;i++) {
tds[i].style.backgroundColor="#FFFFFF";
}
t.style.backgroundColor="#00FF00"
}

</script>

<script language="javascript" type="text/javascript" src="tom.js"></script>

</head>

<body>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="17%" height="50">
<tr>
<td width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2"> 1</font></b></td>
<td width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2">
2</font></b></td>
</tr>
<tr>
<td width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2">
3</font></b></td>
<td width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2">
4</font></b></td>
</tr>
</table>

</body>

</html>

mvh

Synes godt om

roenving Novice

10. maj 2003 - 01:41 #4

Men hvis det skal gælde kun for en afgrænset del af din side (denne her fjerner baggrundsfarven for *alle* tabelceller i dit dokument -- eller rettere sætter den til hvid), skal vi have fat i noget med id, som kan genkendes.

Synes godt om

bluegene Nybegynder

10. maj 2003 - 01:43 #5

det var lige netop sådan noget jeg tænkte på mange takker :)

Synes godt om

roenving Novice

10. maj 2003 - 01:47 #6

Velbekomme -- og takker for points ;~}

Synes godt om

bluegene Nybegynder

10. maj 2003 - 01:50 #7

Men nu jeg kommet til at tænke over det har jeg egentlig flere celler på min side som jo også mister deres farve :-s

Synes godt om

roenving Novice

10. maj 2003 - 01:54 #8

Så må du give de TD'er, som skal påvirkes et id, som du kan checke før assigning af ny farve:

<script language="javascript" type="text/javascript">
function makeGreen(t){
var tds = document.getElementsByTagName("td");
for (i=0;i<tds.length;i++) {
if (tds[i].id.indexOf("farve")!=-1) {
tds[i].style.backgroundColor="#FFFFFF";
}
}
t.style.backgroundColor="#00FF00"
}

Altså her en id, som indeholder 'farve' !-]

Synes godt om

roenving Novice

10. maj 2003 - 01:59 #9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Cellefarve</title>



<link rel="stylesheet" type="text/css" href="style/style.css">

Så må du give de TD'er, som skal påvirkes et id, som du kan checke før assigning af ny farve:

<script language="javascript" type="text/javascript">
function makeGreen(t){
var tds = document.getElementsByTagName("td");
for (i=0;i<tds.length;i++) {
if (tds[i].id.indexOf("farve")!=-1) {
tds[i].style.backgroundColor="#FFFFFF";
}
}
t.style.backgroundColor="#00FF00"
}

</script>

<script language="javascript" type="text/javascript" src="tom.js"></script>

</head>

<body>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="17%" height="50">
<tr>
<td id="farve1" width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2"> 1</font></b></td>
<td id="farve2" width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2">
2</font></b></td>
</tr>
<tr>
<td id="farve3" width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2">
3</font></b></td>
<td id="farve4" width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2">
4</font></b></td>
</tr>
</table>
<br>
<br>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="17%" height="50">
<tr>
<td id="f1" style="background-color:#0f0f0f" width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2"> 1</font></b></td>
<td id="f2" style="background-color:#0f0ff0" width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2">
2</font></b></td>
</tr>
<tr>
<td id="f3" style="background-color:#0ff00f" width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2">
3</font></b></td>
<td id="f4" style="background-color:#f00f0f" width="50%" height="50" align="center" onClick="makeGreen(this);"><b><font size="2">
4</font></b></td>
</tr>
</table>

</body>

</html>

Synes godt om

bluegene Nybegynder

10. maj 2003 - 02:01 #10

altså den må jeg lige have igen *G* er normalt Backend koder og er sådan lidt newbie i JS *G*

Synes godt om

roenving Novice

10. maj 2003 - 02:01 #11

Prøv det ...

Synes godt om

bluegene Nybegynder

10. maj 2003 - 02:02 #12

bare glem det sidste *G* så ikke det sidste indlæg....

Mange takker for hjælpen endnu en gang :)

Synes godt om

roenving Novice

10. maj 2003 - 02:03 #13

Velbekomme

Synes godt om

roenving Novice

10. maj 2003 - 02:04 #14

Forøvrigt fik jeg sat eventhandleren (=ikke fjernet ved kopiering) på den den anden tabel, så de første bliver hvide, men alle i den anden tabel kan blive grønne '-]

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS