CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

kartinm Nybegynder

05. februar 2004 - 11:00 Der er 16 kommentarer og
1 løsning

tabel som <select>-felt

Jeg prøver at få en tabel at opføre sig som en <select>-liste. D.v.s. at når du trykker på en celle, vil denne få en blå baggrund og hvid tekst. Og når der trykkes på en anden cell, bliver denne nye cell markeret, og den gamle markering forsvinder. Jeg har også en mouseOver effect.
Har nogen et forslag til hvordan man kan få disse markeringer at virke ? gerne med css/javascript...

Synes godt om

pelkjaer Nybegynder

05. februar 2004 - 11:03 #1

<td onclick="this.style.backgroundColor='red';this.style.color='white';">celle</td>

Synes godt om

kartinm Nybegynder

05. februar 2004 - 11:07 #2

det virker fint.. MEN det forbliver sådan, selvom man klikker på en anden celle !!

Synes godt om

pelkjaer Nybegynder

05. februar 2004 - 11:08 #3

Ja, men du kan se idéen her jo :)

Men jeg skal nok lige fixe noget til dig.

Synes godt om

roenving Novice

05. februar 2004 - 11:10 #4

Hrm ...

<script type="text/javascript">
function clearCells(cell){
tbl = cell.parentNode;
for(;tbl.tagName!='TABLE';tbl=tbl.parentNode);
elms = tbl.getElementsByTagName('*');
for(i=0;elms.length>i;i++){
if(elms[i].tagName == 'TD'){
elms[i].style.background = "#fff";
elms[i].style.color = "#000";
}
}
}
</script>

<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='white';">celle</td>

Synes godt om

pelkjaer Nybegynder

05. februar 2004 - 11:15 #5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function visHvad() {
var a = arguments;
for (i=0; i<a.length; i+=2) {
if (a[i] != "none") {
x = document.getElementById(a[i]);
x.style.backgroundColor = a[i+1];
}
}
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td id="c1" onClick="visHvad('c1','red','c2','white','c3','white','c4','white')">a</td>
<td id="c2" onClick="visHvad('c1','white','c2','red','c3','white','c4','white')">b</td>
</tr>
<tr>
<td id="c3" onClick="visHvad('c1','white','c2','white','c3','red','c4','white')">c</td>
<td id="c4" onClick="visHvad('c1','white','c2','white','c3','white','c4','red')">d</td>
</tr>
</table>
</body>
</html>

Synes godt om

pelkjaer Nybegynder

05. februar 2004 - 11:15 #6

Ja så fik du 2 eks :)

Synes godt om

kartinm Nybegynder

05. februar 2004 - 11:18 #7

jo tak begge to... men jeg syns´ at roenving eksempel er letter.... så pointene er dine roenving.. hvis du lige dumper et svar... Men tak til jer begge :)

Synes godt om

roenving Novice

05. februar 2004 - 11:20 #8

Velbekomme '-)

Synes godt om

roenving Novice

05. februar 2004 - 11:21 #9

-- men pelkjaer kom jo også med noget af grundkoden !-)

Synes godt om

pelkjaer Nybegynder

05. februar 2004 - 11:24 #10

I don't mind :)

Jeg synes dog at denne her er ganske nice, og nu er der også textfarve med :)

<script type="text/javascript">
function visHvad() {
var a = arguments;
for (i=0; i<a.length; i+=3) {
if (a[i] != "none") {
x = document.getElementById(a[i]);
x.style.backgroundColor = a[i+1];
x.style.color = a[i+2];
}
}
}
</script>

og

<table width="200" border="1">
<tr>
<td id="c1" onClick="visHvad('c1','red','white','c2','white','black','c3','white','black','c4','white','black')">a</td>
<td id="c2" onClick="visHvad('c1','white','black','c2','red','white','c3','white','black','c4','white','black')">b</td>
</tr>
<tr>
<td id="c3" onClick="visHvad('c1','white','black','c2','white','black','c3','red','white','c4','white','black')">c</td>
<td id="c4" onClick="visHvad('c1','white','black','c2','white','black','c3','white','black','c4','red','white')">d</td>
</tr>
</table>

Synes godt om

kartinm Nybegynder

05. februar 2004 - 11:27 #11

den er fin... men problemet er, at i min tabel vil der væer et hav af celler ( ca. 80 ), så den kode-opsætning bliver lidt uoverskuelig.. :)

Synes godt om

pelkjaer Nybegynder

05. februar 2004 - 11:29 #12

Jeps det dúr den ikke til - det eneste smarte er at man i selve trickeren angiver hvad der skal ske.

Synes godt om

roenving Novice

05. februar 2004 - 11:31 #13

Det kan man jo også med den anden:

<html><head><title>Skift celler</title>
<style type="text/css">
td{width:100px;height:100px;text-align:center;font-weight:800;font-family:verdana,sans-serif;font-size:large;}
</style>
<script type="text/javascript">
function clearCells(cell){
tbl = cell.parentNode;
for(;tbl.tagName!='TABLE';tbl=tbl.parentNode);
elms = tbl.getElementsByTagName('*');
for(i=0;elms.length>i;i++){
if(elms[i].tagName == 'TD'){
elms[i].style.background = "#fff";
elms[i].style.color = "#000";
}
}
}
</script>
</head>
<body>
<table><tr>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='white';">celle</td>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='white';">celle</td>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='white';">celle</td>
</tr><tr>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='yellow';">celle</td>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='yellow';">celle</td>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='yellow';">celle</td>
</tr><tr>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='white';">celle</td>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='white';">celle</td>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='white';">celle</td>
</tr><tr>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='magenta';">celle</td>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='magenta';">celle</td>
<td onclick="clearCells(this);this.style.backgroundColor='blue';this.style.color='magenta';">celle</td>
</tr><table>
</body></html>

Synes godt om

roenving Novice

05. februar 2004 - 11:32 #14

-- og tak for points ;~}

Synes godt om

pelkjaer Nybegynder

05. februar 2004 - 11:33 #15

uhm, men så bliver det da først rigtigt overskueligt hvis der er mange properties der skal angives, og på mange elementer :o)

Synes godt om

kartinm Nybegynder

05. februar 2004 - 11:35 #16

faktiskt bruger jeg denne kode:

<td onclick="clearCells(this); this.className='klikket'">celle</td>

det gør det en smule mere overskueligt...

Synes godt om

roenving Novice

05. februar 2004 - 11:38 #17

Det er bare ikke så smart, at skifte className on-the-fly, selv M$ fraråder på det kraftigste at gøre sådan, men vi kan da fixe det med to ekstra linjers kode i funktionen:

function clearCells(cell){
tbl = cell.parentNode;
for(;tbl.tagName!='TABLE';tbl=tbl.parentNode);
elms = tbl.getElementsByTagName('*');
for(i=0;elms.length>i;i++){
if(elms[i].tagName == 'TD'){
elms[i].style.background = "#fff";
elms[i].style.color = "#000";
}
}
cell.style.background = "#00f";
cell.style.color = "#fff";
}

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 HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

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