Søg
Avatar billede supermand69 Nybegynder
06. februar 2004 - 19:35 Der er 37 kommentarer og
1 løsning

ændrer background når checkbox er checked

Jeg har en table med nogle rækker, og i hver række er der en checkbox. Hvordan kan jeg ændre class'en eller background i hele tr'en når jeg checker checkboxen??
Avatar billede grunken Nybegynder
06. februar 2004 - 19:59 #1
sådan ?

<table>
<tr id="trn">
<td>
Masser af indhold
</td>
<td>
mere
</td>
</table>

<input type="checkbox" onclick="document.getElementById('trn').style.backgroundColor=(this.checked)?'#000':'#fff';">
Avatar billede grunken Nybegynder
06. februar 2004 - 20:13 #2
nok mere som en lille funktion, hvis der også skal checkes når du hopper ind på siden :-)

<script type="text/javascript">
function skift(elm){
document.getElementById(elm).style.backgroundColor=(document.getElementById('check').checked)?'#000':'#fff';}
</script>


<body onload="skift('trn')">
<table>
<tr id="trn">
  <td>
  Masser af indhold
  </td>
  <td>
  mere
  </td>
</table>
<input id="check" type="checkbox" onclick="skift('trn')">
</body>
Avatar billede roenving Novice
07. februar 2004 - 08:01 #3
Og så en større udbygning:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Check table row-baggrund</title>
<meta name="keywords" content="søgeord adskilt af komma">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table{border-collapse:collapse}
td{padding:3px;border:0px;}
</style>
<script language="javascript" type="text/javascript">
function skiftBaggrund(fld){
  row = fld.parentNode;
  for(;row.tagName!="TR";row=row.parentNode);
  row.style.backgroundColor = (fld.checked)?'#00f':'#fff';
  row.style.color = (fld.checked)?'#fff':'#000';
}
function checkBaggrund(){
  checks = document.forms[0].check;
  for(i=0;checks.length>i;i++){
    skiftBaggrund(checks[i]);
  }
}
</script>
</head>

<body onload="checkBaggrund()">
  <form>
    <table>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" checked onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" checked onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
    </table>
  </form>
</body>

</html>
Avatar billede supermand69 Nybegynder
09. september 2004 - 22:07 #4
grunken > lav et svar... jeg har nok i det den første kommentar du lavede :)
Avatar billede supermand69 Nybegynder
09. september 2004 - 22:10 #5
men kan man ikke i stedet gøre så den skifter style fra min CSS fil i stedet for? :)
Avatar billede supermand69 Nybegynder
09. september 2004 - 22:22 #6
hmm.... nå, det virkede så ikke helt :(

den skal også skifte style når jeg "markere alle"

function select_all(cb, form)
{
    elm = document.forms[form].elements;
    for(i=0; i<elm.length; i++) if(elm[i].type == 'checkbox')elm[i].checked = cb;
}

<table>
<form name="form_box">
  <tr id="tr23">
    <td><input type="checkbox" name="delete[]" value="23" onclick="document.getElementById('tr23').style.backgroundColor=(this.checked)?'#f5dfdf':'#fff';"></td>
    <td>noget tekst</td>
  </tr>
  <tr id="tr50">
    <td><input type="checkbox" name="delete[]" value="50" onclick="document.getElementById('tr50').style.backgroundColor=(this.checked)?'#f5dfdf':'#fff';"></td>
    <td>noget tekst</td>
  </tr>
  <tr>
    <td><input type="checkbox" onclick="select_all(this.checked, 'form_box');"> Marker alle</td>
</form>
</table>
Avatar billede roenving Novice
11. september 2004 - 03:21 #7
Så skal du ud i:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Check table row-baggrund</title>
<meta name="keywords" content="søgeord adskilt af komma">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table{border-collapse:collapse}
td{padding:3px;border:0px;}
</style>
<script language="javascript" type="text/javascript">
var forced = false;
function skiftBaggrund(fld,force){
  row = fld.parentNode;
  for(;row.tagName!="TR";row=row.parentNode);
  row.style.backgroundColor = (force)?((forced)?'#00f':'#fff'):(fld.checked)?'#00f':'#fff';
  row.style.color = (force)?((forced)?'#fff':'#000'):(fld.checked)?'#fff':'#000';
}
function checkBaggrund(force){
  if(force)forced=!forced;
  checks = document.forms[0].check;
  for(i=0;checks.length>i;i++){
    if(checks[i].name == "check_all")continue;
    if(force){checks[i].checked=forced;skiftBaggrund(checks[i],force);}
    else skiftBaggrund(checks[i],false);
  }
}
</script>
</head>

<body onload="checkBaggrund()">
  <form>
    <table>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" checked onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" checked onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td colspan="5"><input type="checkbox" name="check_all" onclick="checkBaggrund(true);">Check/uncheck alle</td>
      </tr>
    </table>
  </form>
</body>

</html>
Avatar billede supermand69 Nybegynder
11. september 2004 - 15:22 #8
hvordan kan jeg gøre så den skifter style i stedet for?? så jeg ikke skal ændre farven så mange steder :)

tr.grey {
    background:#eeeeee;
}
Avatar billede roenving Novice
11. september 2004 - 15:24 #9
Det er tåbeligt at andre className on-the-fly, da browseren så sletter hele sit css-DOM-tree, og starter forfra med at tegne siden !-)
Avatar billede supermand69 Nybegynder
11. september 2004 - 15:30 #10
hvad mener du?
Avatar billede supermand69 Nybegynder
11. september 2004 - 15:35 #11
har et lille problem mere...

den form i min table er en indbakke i et post system, så alle ulæste posts har en anden baggrund fra starten... hvordan kan jeg lave min funktion så den går tilbage til den oprindelige farve når man unchecker??
Avatar billede roenving Novice
11. september 2004 - 15:38 #12
Når browseren loader en side, opbygger den et bibliotek over alle elementer og deres udseende/css-properties i alle forskellige tilstande ...

Derefter placerer den elementerne på siden på baggrund af alle de regler, som kommer ud af dette bibliotek og elementernes rækkefølge i koden og tegner det, som brugeren ser ...

Hvis man ændrer eet className smides hele dette bibliotek ud, og browseren starter forfra !-)

-- hvis man skal blive i analogien med biblioteket, svarer det til at bibliotekarerne hiver _alle_ bøger ned fra hylden, fordi du afleverer en bog, mens det at ændre en property på et element svarer til at skrive et lille notat i en bog og så sætte den tilbage på hylden !o]
Avatar billede roenving Novice
11. september 2004 - 15:38 #13
Tilbage til default er at sætte den tom !-)
Avatar billede roenving Novice
11. september 2004 - 15:42 #14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Check table row-baggrund</title>
<meta name="keywords" content="søgeord adskilt af komma">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table{border-collapse:collapse}
td{padding:3px;border:0px;}
.even{background-color:#eee;}
.odd{background-color:#ddd;}
</style>
<script language="javascript" type="text/javascript">
var forced = false;
function skiftBaggrund(fld,force){
  row = fld.parentNode;
  for(;row.tagName!="TR";row=row.parentNode);
  row.style.backgroundColor = (force)?((forced)?'#00f':''):(fld.checked)?'#00f':'';
  row.style.color = (force)?((forced)?'#fff':''):(fld.checked)?'#fff':'';
}
function checkBaggrund(force){
  if(force)forced=!forced;
  checks = document.forms[0].check;
  for(i=0;checks.length>i;i++){
    if(checks[i].name == "check_all")continue;
    if(force){checks[i].checked=forced;skiftBaggrund(checks[i],force);}
    else skiftBaggrund(checks[i],false);
  }
}
</script>
</head>

<body onload="checkBaggrund()">
  <form>
    <table>
      <tr class="odd">
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" checked onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr class="even">
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr class="odd">
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr class="even">
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" checked onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr class="odd">
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr class="even">
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr class="odd">
        <td>Første kolonne</td>
        <td>Anden kolonne</td>
        <td>Tredje kolonne</td>
        <td>Fjerde kolonne</td>
        <td><input type="checkbox" name="check" onclick="skiftBaggrund(this);"></td>
      </tr>
      <tr>
        <td colspan="5"><input type="checkbox" name="check_all" onclick="checkBaggrund(true);">Check/uncheck alle</td>
      </tr>
    </table>
  </form>
</body>

</html>
Avatar billede supermand69 Nybegynder
11. september 2004 - 15:43 #15
ok... men min check_all virker ikke?

desuden behøver den heller ikke at checke siden ved onload da der alligevel aldrig er nogle som er checked fra starten af... :)
Avatar billede roenving Novice
11. september 2004 - 15:48 #16
Ovenstående virker da ?-)
Avatar billede roenving Novice
11. september 2004 - 15:49 #17
-- og hvis du ikke har brug for checket onload, fjerner du simpelthen onload fra body-tagget !-)
Avatar billede supermand69 Nybegynder
11. september 2004 - 15:51 #18
ja, men hvordan kan jeg reducere min funktion så den kun gør som den skal :p
Avatar billede roenving Novice
11. september 2004 - 15:53 #19
Hvordan reducere ?-)

-- i ovenstående er der brug for begge funktioner, da den ene checker en enkelt og den anden checker alle ...
Avatar billede supermand69 Nybegynder
11. september 2004 - 15:57 #20
ok, jeg troede bare man kunne reducere checkBaggrund efter som den ikke skal være i onload mere? :)
Avatar billede supermand69 Nybegynder
11. september 2004 - 18:10 #21
hmm... jeg kan simpelthen ikke få check_all til at virke?? gider du lige se på det?

var forced = false;
function change_background(fld, force)
{
    row = fld.parentNode;
    for(; row.tagName!='TR'; row=row.parentNode);
    row.style.backgroundColor = (force)?((forced)?'#f5dfdf':''):(fld.checked)?'#f5dfdf':'';
}

function check_background(force)
{
    if(force) forced =! forced;
    checks = document.forms[0].check;
    for(i=0; checks.length>i; i++)
    {
        if(checks[i].name == 'check_all') continue;
        if(force)
        {
            checks[i].checked = forced;
            change_background(checks[i], force);
        }
        else change_background(checks[i], false);
    }
}

test@test.dk // 123
http://www.elektrobeat.dk/gfx/user.post.php
Avatar billede roenving Novice
11. september 2004 - 22:25 #22
Hedder dine checkboxe 'check' ?-)
Avatar billede supermand69 Nybegynder
11. september 2004 - 22:45 #23
hvad mener du?
Avatar billede roenving Novice
11. september 2004 - 22:47 #24
checks = document.forms[0].check;

-- henter alle de checkboxe, som har name="check" !-)
Avatar billede supermand69 Nybegynder
11. september 2004 - 22:48 #25
nej de hedder delete[]
Avatar billede roenving Novice
11. september 2004 - 22:52 #26
checks = document.forms[0].elements['delete[]'];
Avatar billede supermand69 Nybegynder
11. september 2004 - 22:55 #27
kan man ikke lave det sådan at man ikke skal angive hvilke navne checkboxene skal have? så kan jeg også bruge funktionen andre steder hvor boxene ikke hedder det samme :)
Avatar billede roenving Novice
11. september 2004 - 23:00 #28
Hvis du vil bruge den samme funktion, kan man jo bare have navnet med som parameter, ellers kan du bare ændre navnet i linjen ...

function check_background(force,cname)
{
    if(force) forced =! forced;
    checks = document.forms[0].elements[cname];
    for(i=0; checks.length>i; i++)
    {
        if(force)
        {
            checks[i].checked = forced;
            change_background(checks[i], force);
        }
        else change_background(checks[i], false);
    }
}

<td colspan="5"><input type="checkbox" name="check_all" onclick="checkBaggrund(true,'delete[]');">Check/uncheck alle</td>
Avatar billede supermand69 Nybegynder
11. september 2004 - 23:06 #29
hmm... synes stadig ikke at det virker?
Avatar billede supermand69 Nybegynder
12. september 2004 - 15:34 #30
roenving > kan du ikke se hvad jeg gør galt? :(
Avatar billede roenving Novice
12. september 2004 - 16:07 #31
Jeg er lidt loren overfor at adressere med 'delete[]', men jeg kan ikke se fejl ved det, men jeg har ikke været inde for at kigge din kode efter i sømmene ...
Avatar billede supermand69 Nybegynder
12. september 2004 - 16:15 #32
jamen hvad kan jeg så gøre i stedet for??
Avatar billede supermand69 Nybegynder
12. september 2004 - 16:17 #33
kan man så i stedet for ikke gøre sådan at den ikke skal have name på mine checkboxe, men i stedet for angiver navnet på min form og den så markere alle checkboxe i den pågældende form?
Avatar billede supermand69 Nybegynder
12. september 2004 - 16:17 #34
ok.. det lød lidt kryptisk... håber du lige forstår hvad jeg mente ;)
Avatar billede supermand69 Nybegynder
14. september 2004 - 19:38 #35
kunne det ikke lade sig gøre at lave en funktion som checker alle checkboxe i formen??
Avatar billede supermand69 Nybegynder
14. september 2004 - 20:19 #36
kan man ikke lave noget i retning af det her?

var forced = false;
function change_background(fld, force)
{
    row = fld.parentNode;
    for(; row.tagName!='TR'; row=row.parentNode);
    row.style.backgroundColor = (force)?((forced)?'#f5dfdf':''):(fld.checked)?'#f5dfdf':'';
}

function check_all(cb, frm)
{
    checks = document.forms[frm].elements;
    for(i=0; checks.length>i; i++)
    {
        if(elm[i].type == 'checkbox')
        {
            checks[i].checked = cb;
            change_background(checks[i], force);
        }
        else change_background(checks[i], false);
    }
}
Avatar billede supermand69 Nybegynder
15. september 2004 - 17:50 #37
kan det ikke lade sig gøre? :(
Avatar billede supermand69 Nybegynder
19. september 2004 - 08:57 #38
lukker
Avatar billede 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.

Loading billede Opret Preview
Kategori
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 03/05/202613:59
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 15:14 Sætte billeder ind i google sheets ark ud fra elev nummer Af lurup i Excel
16/0822:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
16/0812:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
15/0811:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
White papers
Flere white papers »