Byta Style p[ en <TD>

9 svar · 330 visningar · startad av Jaar 10 juli 2002

JaarMedlem sedan juli 2001434 inlägg

10 juli 2002 12:42#1

Jag har en table och vill skapa en OnMouseOver funktion på hela raden som endast byter bakgrundsfärgen på en av kolumnerna.

Nu har jag följande :

<TR OnMouseOver="this.style.backgroundColor='#CCCCCC'" OnMouseOut="this.style.backgroundColor='#FFFFFF'">

<TD CLASS="namn">Namn</TD>
<TD>Info</TD>
</TR>

Det jag skulle vilja åstakomma är att byta style.backgroundColor på Namn kolumnen endast. Går det?

JojoxxMedlem sedan juni 20004 308 inlägg

10 juli 2002 13:11#2

Exempel;

<style type="text/css">
.cola { background-color:white; }
.colb { background-color:white; }
</style>
<script language="JavaScript" type="text/javascript">
function getStyleClassByName(className){
	if(document.all){
		for(var styleSheet=0;styleSheet<document.styleSheets.length;styleSheet++){
			for(var rule=0;rule<document.styleSheets[styleSheet].rules.length;rule++){
				if(document.styleSheets[styleSheet].rules[rule].selectorText=="."+className){ return document.styleSheets[styleSheet].rules[rule]; }
			}
		}
	} else if(document.getElementById){
		for(var styleSheet=0;styleSheet<document.styleSheets.length;styleSheet++){
			for(var rule=0;rule<document.styleSheets[styleSheet].cssRules.length;rule++){
				if(document.styleSheets[styleSheet].cssRules[rule].selectorText=="."+className){ return document.styleSheets[styleSheet].cssRules[rule]; }
			}
		}
	}
}	
</script>
<table border="1">
	<tr>
		<td class="cola"
			onMouseover="getStyleClassByName('cola').style.backgroundColor='blue';"
			onMouseout="getStyleClassByName('cola').style.backgroundColor='white';">
			Kolumn A
		</td>
		<td class="colb"
			onMouseover="getStyleClassByName('colb').style.backgroundColor='blue';"
			onMouseout="getStyleClassByName('colb').style.backgroundColor='white';">
			Kolumn B
		</td>
	</tr>
	<tr><td class="cola">Foo</td><td class="colb">Foo</td></tr>
	<tr><td class="cola">Foo</td><td class="colb">Foo</td></tr>
</table>

JaarMedlem sedan juli 2001434 inlägg

10 juli 2002 13:19#3

Fast man flyttar onMouseOver till sin <TR> då eller? annars reagerar den väl inte på hela raden?

Jag vill alltså att ett fält byter färg men att den reagerar på hela raden. Får ta o testa ditt exempel men o mixtra lite ...

JojoxxMedlem sedan juni 20004 308 inlägg

10 juli 2002 16:59#4

Du skrev "kolumn". Det brukar man benämna en vertikal "rad" av celler. En <tr> (table row) är en horisontell rad...

<table border="1">
<tr onMouseover="this.style.backgroundColor='blue';" onMouseout="this.style.backgroundColor='white';"><td>a</td><td>b</td></tr>
<tr onMouseover="this.style.backgroundColor='blue';" onMouseout="this.style.backgroundColor='white';"><td>c</td><td>d</td></tr>
</table>

JaarMedlem sedan juli 2001434 inlägg

11 juli 2002 06:54#5

Ajajaj, nu läser du fel igen...
Citat från mig själv:
"Jag har en table och vill skapa en OnMouseOver funktion på hela raden som endast byter bakgrundsfärgen på en av kolumnerna"

Jag vill ha OnMouseOver på TRen men byta färgen på en specifik TD :)

P.S. Har inte hunnit testa ditt första ännu...

JojoxxMedlem sedan juni 20004 308 inlägg

11 juli 2002 08:50#6

Hade du sagt en av cellerna istället för en av kolumnerna hade jag varit med på första frågen ;)

<table border="1">
<tr onMouseover="document.getElementById('thisone').style.backgroundColor='blue';" onMouseout="document.getElementById('thisone').style.backgroundColor='white';"><td id="thisone">Foo</td><td>Bar</td></tr>
<tr><td>Foo</td><td>Bar</td></tr>
</table>

JaarMedlem sedan juli 2001434 inlägg

11 juli 2002 14:05#7

Hehe, ok...

Nu funkar det iaf, men ett litet problem!

Cellen "flimmrar" när man drar längs raden, varför då?
Varje flimmer uppstår då man byter CELL :e

Detta är en rad i tabellen

<TR OnMouseOver="document.getElementById('6').style.backgroundColor='blue'" OnMouseOut="document.getElementById('6').style.backgroundColor='white'">
<TD ID="6" CLASS="namn">Anders&nbsp;&nbsp;</TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
</TR>

Lite rörigt, det är en autogenererad kalender grej...

JojoxxMedlem sedan juni 20004 308 inlägg

11 juli 2002 14:31#8

Får nog kalla det webbläsarbugg. Mellanrummet som är mellan cellerna anses inte tillhöra varken rad eller cell. Använder du inte border på tabellen borde du dock kunna sätta cellspacing till 0 och öka cellpaddingen istället.

JaarMedlem sedan juli 2001434 inlägg

11 juli 2002 14:43#9

Har border="0" cellpadding="0" cellspacing="0"

(jsp)    out.println("<TABLE BORDER=\"0\" CELLPADDING=\"0\" CELLSPACING=\"0\">");

Asså, det kanske är nåt koko med IE, men i NS funkar inte OnMouseOver på TR:en alls (NS 4.xx)
Alla dessa buggar asså :e

Jag funderade på ifall det kunde ha med att de andra td hade bgcolor o det störde (när jag bytte bakgrund på hela tr:en asså) men det verkar itne ha ett dyft med saken o göra

JojoxxMedlem sedan juni 20004 308 inlägg

11 juli 2002 22:21#10

Nej, Netscape 4.x stödjer inte objektmodellen DOM enligt w3c heller så var det bra med den saken. Det är mycket som Netscape 4 inte stödjer (eller som inte fanns på den tiden kanske vi ska säga. Kan inte begära så mycket).