Søg
Avatar billede speder2 Nybegynder
18. januar 2002 - 11:31 Der er 11 kommentarer og
1 løsning

Ændre <TR>-farve ved afkrydsning

Hej Jeg har et simpelt spg :-) Hvordan ændrer man baggrundsfarven i et row i en tabel ved afkrydsning af en checkbox. Her er lidt kode:
*******************
<html>
<head>
<title>test</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
</head>

<body bgcolor=\"#FFFFFF\" text=\"#000000\">
<form name=\"form1\" method=\"post\" action=\"\">
  <table width=\"300\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
    <tr>
      <td>
        <input type=\"checkbox\" name=\"checkbox\" value=\"checkbox\">
      </td>
      <td>tekst1</td>
    </tr>
    <tr>
      <td>
        <input type=\"checkbox\" name=\"checkbox2\" value=\"checkbox\">
      </td>
      <td>tekst2</td>
    </tr>
    <tr>
      <td>
        <input type=\"checkbox\" name=\"checkbox3\" value=\"checkbox\">
      </td>
      <td>tekst3</td>
    </tr>
  </table>
</form>
</body>
</html>
********************************
Problemet - for mig - er, at der er to kolonner, og begge kolonner skal skifte farve ved afkrydsning. Derfor kan \"this\" ikke bruges (eller?).

Løsningen må meget gerne virke i så mange browsere som muligt.
Avatar billede speder2 Nybegynder
18. januar 2002 - 11:32 #1
Lige et tillæg. Farven skal naturligvis forsvinde hvis flueben fjernes fra checkbox.
Avatar billede a-torsten Nybegynder
18. januar 2002 - 11:33 #2
Opret en hotmail-konto og stjæl..  ;o)

-Anders
Avatar billede speder2 Nybegynder
18. januar 2002 - 11:33 #3
Og lige et til. Løsningen skal helst være \"skalerbar\". Det kan godt være at der er 100 rows. Derfor ville det være smart, hvis der ikke skal indsættes speciel kode for hver onClick i checkbox.
Avatar billede speder2 Nybegynder
18. januar 2002 - 11:34 #4
:-) Ja, men der er så meget scriptkode derinde, at det nærmest er umuligt, at finde det rigtige.
Avatar billede nute Nybegynder
18. januar 2002 - 11:36 #5
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">

<html>
<head>
    <title>Untitled</title>
    <SCRIPT LANGUAGE=\"JavaScript\" TYPE=\"text/javascript\">
  <!--
    ns  = (document.layers) ? true : false;
    ns6 = (document.getElementById) ? true : false;
    ie  = (document.all) ? true : false;
    var col = \"#ffffff\";

   
  function colorize( elem ){
      col = (elem.checked)?\"#F8E3D1\":\"#ffffff\";
      if( ie ){
        elem.style.backgroundColor=col;
        document.all[\'div\' + elem.name ].style.backgroundColor=col;
      } else if( ns ){
          document.layers[\'divChk\' + id ].document.bgColor = col;
      } else if( ns6 ){
          document.getElementById(\"chk\" + id ).style.backgroundColor = col;
        document.getElementById(\"divChk\" + id ).style.backgroundColor=col;
      }

  }
  //-->
  </SCRIPT>
</head>

<body>
<form name=\"frm\">
<table width=\"100\">
    <tr id=\"Chk1\" name=\"Chk1\">
      <td width=\"100%\">
          <div name=\"divChk1\" id=\"divChk1\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
            <input type=\"checkbox\" name=\"Chk1\" onclick=\"colorize( this );\" value=\"1\"> tadaa<br>
            </div>
        </td>
    </tr>
    <tr id=\"Chk2\" name=\"Chk2\">
      <td width=\"100%\">
          <div name=\"divChk2\" id=\"divChk2\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
            <input type=\"checkbox\" name=\"Chk2\" onclick=\"colorize( this );\" value=\"3\"> tadaa<br>
            </div>
        </td>
    </tr>
    <tr id=\"Chk3\" name=\"Chk3\">
      <td  width=\"100%\">
          <div name=\"divChk3\" id=\"divChk3\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
            <input type=\"checkbox\" name=\"Chk3\" onclick=\"colorize( this );\" value=\"30\"> tadaa<br>
            </div>
        </td>
    </tr>
    <tr id=\"Chk4\" name=\"Chk4\">
      <td width=\"100%\">
          <div name=\"divChk4\" id=\"divChk4\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
            <input type=\"checkbox\" name=\"Chk4\" onclick=\"colorize( this );\" value=\"12\"> tadaa<br>
            </div>
        </td>
    </tr>
</table>
</form>

</body>
</html> 
Avatar billede tknudsen Nybegynder
18. januar 2002 - 11:40 #6
du kunne ændre style\'en for tabellen (ikke testet):

<style>

.Set
{
  background-color: #C0C0C0;
}

.Reset
{
  background.color: #FFFFFF;
}

</style>

<script>


function setStyle(objChk)
{
  objTr = objChk.parentElement.parentElement;

  if(objChl.checked)
  objTr.className = \'Set\';
  else
  objTr.className = \'Reset\';
}

</script>

<table>
<tr><td>
<input type=\"checkbox\" name=\"checkbox3\" value=\"checkbox\" onClick=\"setStyle(this)\">
</td></tr>
</table>
Avatar billede nute Nybegynder
18. januar 2002 - 11:44 #7
tknudsen >> hvorfor tester du ikke før du poster...det koster ett lite minutt å finne ut om det i det hele tatt fungerer. Det du har postet fungerer *ikke*
Avatar billede speder2 Nybegynder
18. januar 2002 - 11:45 #8
Nute. Næsten rigtigt, men du har kun en kolonne. Kan du få den til at virke over to kolonner?

Ps. Enig i at det irriterende, at folk poster uden at check om tingene virker.
Avatar billede nute Nybegynder
18. januar 2002 - 11:55 #9
speder2 >> uups...det var en liten detalj jeg hadde glemt :) man *kan* få den til å fungere over to kolonner...så skal man bare legge til til ekstra kode...

til din PS: fino ;)

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">

<html>
<head>
    <title>Untitled</title>
    <SCRIPT LANGUAGE=\"JavaScript\" TYPE=\"text/javascript\">
  <!--
    ns  = (document.layers) ? true : false;
    ns6 = (document.getElementById) ? true : false;
    ie  = (document.all) ? true : false;
    var col = \"#ffffff\";

   
  function colorize( elem ){
      col = (elem.checked)?\"#F8E3D1\":\"#ffffff\";
      if( ie ){
        elem.style.backgroundColor=col;
        document.all[\'div\' + elem.name ].style.backgroundColor=col;
                document.all[\'div\' + elem.name + \"_2\"].style.backgroundColor=col;
      } else if( ns ){
          document.layers[\'divChk\' + id + \"_2\" ].document.bgColor = col;
      } else if( ns6 ){
        document.getElementById(\"chk\" + id ).style.backgroundColor = col;
        document.getElementById(\"divChk\" + id + \"_2\" ).style.backgroundColor=col;
      }

  }
  //-->
  </SCRIPT>
</head>

<body>
<form name=\"frm\">
<table width=\"100\">
    <tr id=\"Chk1\" name=\"Chk1\">
      <td width=\"50%\">
          <div name=\"divChk1\" id=\"divChk1\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
            <input type=\"checkbox\" name=\"Chk1\" onclick=\"colorize( this );\" value=\"1\"> tadaa<br>
            </div>
        </td>
                <td width=\"50%\">
                  <div name=\"divChk1_2\" id=\"divChk1_2\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
                  tadaa
                    </div>
                </td>
    </tr>
    <tr id=\"Chk2\" name=\"Chk2\">
      <td width=\"50%\">
          <div name=\"divChk2\" id=\"divChk2\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
            <input type=\"checkbox\" name=\"Chk2\" onclick=\"colorize( this );\" value=\"3\"> tadaa<br>
            </div>
        </td>
                <td width=\"50%\">
                  <div name=\"divChk2_2\" id=\"divChk2_2\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
                    tadaa
                    </div>
                </td>
    </tr>
    <tr id=\"Chk3\" name=\"Chk3\">
      <td  width=\"50%\">
          <div name=\"divChk3\" id=\"divChk3\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
            <input type=\"checkbox\" name=\"Chk3\" onclick=\"colorize( this );\" value=\"30\"> tadaa<br>
            </div>
        </td>
                <td width=\"50%\">
                <div name=\"divChk3_2\" id=\"divChk3_2\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
                  tadaa
                    </div>
                </td>
    </tr>
    <tr id=\"Chk4\" name=\"Chk4\">
      <td width=\"50%\">
          <div name=\"divChk4\" id=\"divChk4\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
            <input type=\"checkbox\" name=\"Chk4\" onclick=\"colorize( this );\" value=\"12\"> tadaa<br>
            </div>
        </td>
                <td width=\"50%\">
                  <div name=\"divChk4_2\" id=\"divChk4_2\" style=\"position:relative;top:0px;left:0px;clip:rect(0,100,20,0);background-color:#ffffff;layer-background-color:#ffffff;\">
                    tadaa
                    </div>
                </td>
    </tr>
</table>
</form>

</body>
</html> 
Avatar billede speder2 Nybegynder
18. januar 2002 - 12:03 #10
Tak :-)
Avatar billede tknudsen Nybegynder
18. januar 2002 - 12:05 #11
nute >> Som regel er mine indlæg ment som forslag/inspiration - og ikke færdig kode. Jeg synes nemlig det er irreterende at der postes hele html-filer, så et simpelt spørgsmål kan druknes i alen lange svar, hvor det essentielle kan være svært at få øje på.


I mit tidligere indlæg er der tale om en tastefejl så if-sætningen kommer til at se således ud:

if(objChk.checked)


*undskyld* den *ringe* indsats (!?!!?)
Avatar billede nute Nybegynder
18. januar 2002 - 12:50 #12
tknudsen >> jeg er forsåvidt enig med deg i at det er irriterende med hele html filer (selv om \'hele\' i denne sammenheng er en relativ mengde), og jeg er også tilbøyelig til å være enig i at koden her inne bør være en pekepinn/forslag/inspirasjon.

Men...på samme tid vil jeg også si at man skal poste sine forslag i henhold til det stilte spørsmål. I dette tilfelle så \"krever\" speder2 at det skal fungere i så mange browsere som mulig. *Det* er et kriterie som iallefall jeg stiller som et av de viktigste.

Jeg mener ikke å rakke ned på din løsning...den er faktisk smart nok hvis man ser bort fra kompatibilitet med litt eldre browsere, så du har ingen grunn til å \"unnskylde\" for din \"ringe\" innsats.

Det er etterhvert så mange poengryttere her inne at man ikke kan skille seriøse innlegg fra de mindre seriøse innlegg. Derfor kommenterer jeg innlegg til brukere jeg ikke \"kjenner\" eller gjenkjenner om at de bør poste noen ordentlige svar. Resultatet av ordentlige svar er at threadsene blir kortere og det er enklere å finne svar hurtig hvis man søker etter det.

/nute
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 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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 16:43 Nomad Tracking Car Af fleknes i Apps til Android
25/0916:15 Internet forsvinder hele tiden Af TTA i Internetforbindelser
23/0920:49 Fejl på Tv2 Play Af Bukse i Browsere
23/0918:11 VB, Lægge 2 celler sammen og skrive den i cellen ved side af Af MC3390 i Excel
21/0910:39 DBA er ikke hvad det tidligere var - desværre! Af ErikHg i Fri debat
White papers
Flere white papers »