onclick + checkbox + <table>/<td>

[lifetimeboy]

Jeg har litt problemer. Mitt mål er og få til en løsning som fungerer på den måten at når jeg klikker på <checkbox> så skal cellen den er plassert i endre bakgrunnsfarge.

 

Jeg har fått til funksjonen for bare cellen/<td>, men vil at cellen endrer farge KUN når <checkbox> er valgt. Å når den evt skulle bli valgt bort skal bakgrunnsfarge gå tilbake til normal.

 

Samtidig bruker jeg onMouseOver/onMouseOut på selve raden/<tr>

 

Dette er hva jeg har fått til så langt etter en del googleing og kapt med forståelse av JS.

 

<table>
 <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
   <td>Klikk på checkboxen</td>
   <td onclick="toggleBGcol(this);"><input type="checkbox" /></td>
 </tr>
</table>

 

Med over nevnte plassering av "onclick="toggle" så endres cellen om cellen blir klikket på, noe som er meget dumt om jeg bommer på <checkbox>en.

Har også forsøkt og sette denne inn i <input checkbox>

<input onclick="toggleBGcol(this);" type="checkbox" />

Men da fikk bare den lille <checkbox> ruten ny bakgrunnsfarge.

 

her er Javascript koden

 

function toggleBGcol(object) {
if ( object.style.backgroundColor == '' || object.style.backgroundColor == undefined ) {
	 object.style.backgroundColor = '#FF2B2B';
} else {
	 object.style.backgroundColor = '';
}
}

 

 

Så kort fortalt det jeg prøver på er at hele raden endrer farge "onmouseover", men kun en celle endrer farge når <checkbox> benyttes.

 

 

Noen som vet hva jeg gjør galt og som kanskje kan hjelpe meg litt?

Endret 25. august 2010 av lifetimeboy

[Gjest]

function toggleBGcol(object) 
{
	var pTR = object.parentNode.parentNode;
       if (  pTR.style.backgroundColor == '' || pTR.style.backgroundColor == undefined ) {
                 pTR.style.backgroundColor = '#FF2B2B';
       } else {
                 pTR.style.backgroundColor = '';
       }
}

Fungerer den javascript-koden?

Endret 25. august 2010 av Gjest

[lifetimeboy]

Ja og nei, bakgrunnsfargen endres og endres kun tilbake om man klikker på <checkbox> igjen, men problemet er at alle cellene i tabellen får denne bakgrunnsfargen.

 

kan det være en ide og gi cellen en id av et slag?

[Yawa]

du må angi en unik id pr. element.

 

altså:

id="celle1"

id="celle2"

id="celle3"

...

Denne må også være etter onclick=""

 

Hvis dette ikke blir alle tatt under samme kam...

Endret 25. august 2010 av Yawa

[lifetimeboy]

du må angi en unik id pr. element.

 

altså:

id="celle1"

id="celle2"

id="celle3"

...

Denne må også være etter onclick=""

 

Hvis dette ikke blir alle tatt under samme kam...

 

Var det jeg trodde, og det ser ut til at jeg nærmer meg. men, id"" må være ETTER onlick"" sier du, får ikke dette helt til da onclick"" funksjonen ligger i cellen og da ikke er en del av cellens verdi.

//Med denne funksjonen så blir kun raden markert med ny bakgrunnsfarge ikke helle tabellen som sist
//men igjen så klarer ikke jeg og få bare cellen til og endre seg:

<table>
 <tr onmouseover="this.className='highlight'" onmouseout="this.className='normal'">
   <td id="celle1">Klikk på checkboxen</td>
   <td id="celle2"><input onclick="toggleBGcol(this);" type="checkbox" /></td>
 </tr>
</table>


//Men gjør jeg slik at onclick"" blir før id="" så blir hele tabellens bakgrunn endret:

<table>
 <tr onmouseover="this.className='highlight'" onmouseout="this.className='normal'">
   <td id="celle1">Klikk på checkboxen</td>
   <td onclick="toggleBGcol(this);" id="celle2"><input type="checkbox" /></td>
 </tr>
</table>

[FuLu]

Kjapp og dårlig kode (ikke noe validerer eller ei sjekket for å være støttet for annet enn firefox'en min )

 

<style>
td { padding: 10px; }
.highlight {
background-color: #ffc;
}
.highlight td {
border: 1px solid #cc9;
}
.normal {
background-color: #fff;
}
.normal td {
border: 1px solid #eee;
}
</style>

<script>
function toggleBGcol(object) {
       if ( object.parentNode.style.backgroundColor == '' || object.parentNode.style.backgroundColor == undefined ) {
                object.parentNode.style.backgroundColor = '#FF2B2B';
       } else {
                object.parentNode.style.backgroundColor = '';
       }
}
</script>

<table>
 <tr class="normal" onmouseover="this.className='highlight'" onmouseout="this.className='normal'">
   <td>Klikk på checkboxen</td>
   <td><input type="checkbox" onclick="toggleBGcol(this);" /></td>
 </tr>
</table>

Endret 25. august 2010 av FuLu

[Yawa]

det jeg mente der var at id'en må oppgies etter at onclick="" er satt hvis disse defieneres i samme celle/tag...

Endret 25. august 2010 av Yawa

[lifetimeboy]

Da fikk jeg den til og fungere.

 

Tusen takk alle sammen!!!

[Yawa]

huske å huke av for [løst]...

[lifetimeboy]

Ble gjort en endring og jeg møtte på et problem

Har endret <checkbox> til <radio>.

Problemet mitt da er at jeg får ikke den til og ta bort fargen om en annen <radio> blir valgt.

 

Altså, alt er ok når man velger og trykk på en <radio>knapp, men velger man enn annen sitter man igjen med flere som er markert

 

Forsøkt og søke opp noe rundt evaluering for og finne ut om den er valgt eller ikke, men feilet litt da jeg ikke kan JS godt nok

Det jeg fant var obj.checked og da legge dette i en if spørring.

 

 

Trenger litt hjelp, så håper noen har interesse av og hjelpe meg

[FuLu]

<style>
td { padding: 10px; }
.highlight {
background-color: #ffc;
}
.highlight td {
border: 1px solid #cc9;
}
.normal {
background-color: #fff;
}
.normal td {
border: 1px solid #eee;
}
</style>

<script>
function toggleBGcol(object) {
       var parent_form_inputs = document.getElementById('form_1').getElementsByTagName('input');
	for (i=0;i<parent_form_inputs.length;i++) {
		if(parent_form_inputs.item(i).type == 'radio' && parent_form_inputs.item(i) != object) {
			parent_form_inputs.item(i).parentNode.style.backgroundColor = '#fff';
		}
	}
       object.parentNode.style.backgroundColor = '#FF2B2B';
}
</script>

<form id="form_1">
<table>
 <tr class="normal" onmouseover="this.className='highlight'" onmouseout="this.className='normal'">
   <td>Klikk på radioen</td>
   <td><input type="radio" name="radiobutton" value="A" onclick="toggleBGcol(this);" /></td>
 </tr>
 <tr class="normal" onmouseover="this.className='highlight'" onmouseout="this.className='normal'">
   <td>Klikk på radioen</td>
   <td><input type="radio" name="radiobutton" value="B" onclick="toggleBGcol(this);" /></td>
 </tr>
 <tr class="normal" onmouseover="this.className='highlight'" onmouseout="this.className='normal'">
   <td>Klikk på radioen</td>
   <td><input type="radio" name="radiobutton" value="C" onclick="toggleBGcol(this);" /></td>
 </tr>
 <tr class="normal" onmouseover="this.className='highlight'" onmouseout="this.className='normal'">
   <td>Klikk på radioen</td>
   <td><input type="radio" name="radiobutton" value="D" onclick="toggleBGcol(this);" /></td>
 </tr>
</table>
</form>

Endret 1. september 2010 av FuLu

[lifetimeboy]

Ser jeg var litt på avveie.

Takk!!