webForumDet fria alternativet

Select-list liknande grej

1 svar · 153 visningar · startad av SilvioF

SilvioFMedlem sedan juni 2000585 inlägg
#1

Hej. Har lite problem här nu som jag tänkte att ni skulle få hjälpa mig med.

Vad koden skall göra är egentligen att likna en <select multiple>-tag. Jag vill att om man klickar på en rad så skall bgcolor sättas till blå(eller någon annan färg), vid mouseover skall den vara ljusgrå och vid mouseout skall den gå tillbaka till den färgen som den hade innan mouseover. Problemet ligger nog säkert i att jag inte är så värst bra på javascript, men i det här fallet så måste jag nog använda mig av det.

I alla fall. Saken är den att vad jag ytterligare vill att funktionen skall göra är att man skall kunna göra mer än ett val, kanske genom att använda högerknappen istället för vänsterknappen, men det är en senare fråga. Vidare så skall man kunna få ut alla värden från vissa variabeln val om man trycker på en knapp.(som fattas i koden nedan)

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
		<style>
			.sorttext{FONT-SIZE: 11px;COLOR: #000000;FONT-FAMILY: Verdana, Arial;}
			.text1{FONT-SIZE: 11px;COLOR: #000000;LINE-HEIGHT: 150%;FONT-FAMILY: Verdana, Arial;}
			.buttons{FONT-SIZE: 10px;COLOR: #000000;FONT-FAMILY: Verdana, Arial;}
			A{COLOR: #1e1e1e;FONT-FAMILY: Verdana, Arial;TEXT-DECORATION: none;}
			A:link{COLOR: #1e1e1e;FONT-FAMILY: Verdana, Arial;TEXT-DECORATION: none;}
			A:active{COLOR: #1e1e1e;FONT-FAMILY: Verdana, Arial;TEXT-DECORATION: none;}
			A:visited{COLOR: #1e1e1e;FONT-FAMILY: Verdana, Arial;TEXT-DECORATION: none;}
			A:hover{COLOR: #000000;FONT-FAMILY: Verdana, Arial;TEXT-DECORATION: underline;}
		</style>
		<script language="JavaScript">
			<!--
				var val = new Array();
				var klickad = new Array();
				var valfarg = new Array();
				var antalval = 0;
				var bgcolor = '#FFFFFF';

				function mus(namn, handelse)
				{
					if(handelse == 1)
					{
						for(i = 0; i < antalval; i++)
						{
							if(namn = val[i])
							{
								bgcolor = valfarg[i];
							} else {
								bgcolor = '#FFFFFF';
							}
						}
						document.all[namn].style.backgroundColor = bgcolor;
						bgcolor = '#FFFFFF';
					}

					if(handelse == 2)
					{
						for(i = 0; i < antalval; i++)
						{
							if(namn = val[i])
							{
								bgcolor = valfarg[i];
							} else {
								bgcolor = '#C0C0C0';
							}
						}
						document.all[namn].style.backgroundColor = bgcolor;
						bgcolor = '#C0C0C0';
					}

					if(handelse == 3)
					{
						val[antalval] = namn;
						klickad[antalval] = 1;
						valfarg[antalval] = '#5555DD';
						antalval ++;
					}
				}
			-->
		</script>
	</head>
	<body bgcolor="#C0C0C0" topmargin="4">
		<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
			<tr>
				<td valign="top" align="left" bgcolor="#FFFFFF" height="100%">
					<table border="0" cellpadding="0" cellspacing="0" width="100%" bordercolor="#000000" style="border: 0 solid #000000">
						<tr>
							<td nowrap>
								<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border: 1 solid #000000">
									<tr>
										<td width="2" nowrap><img border="0" src="../images/left_list.gif" width="5" height="16"></td>
										<td nowrap class="sorttext">Company Name</td>
										<td width="2"><img border="0" src="../images/right_list.gif" width="5" height="16"></td>
									</tr>
								</table>
							</td>
							<td nowrap>
								<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border: 1 solid #000000">
									<tr>
										<td width="2"><img border="0" src="../images/left_list.gif" width="5" height="16"></td>
										<td  class="sorttext">Contact</td>
										<td width="2"><img border="0" src="../images/right_list.gif" width="5" height="16"></td>
									</tr>
								</table>
							</td>
							<td nowrap>
								<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border: 1 solid #000000">
									<tr>
										<td width="2"><img border="0" src="../images/left_list.gif" width="5" height="16"></td>
										<td  class="sorttext">Title</td>
										<td width="2"><img border="0" src="../images/right_list.gif" width="5" height="16"></td>
									</tr>
								</table>
							</td>
							<td nowrap>
								<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border: 1 solid #000000">
									<tr>
										<td width="2"><img border="0" src="../images/left_list.gif" width="5" height="16"></td>
										<td  class="sorttext">Date</td>
										<td width="2"><img border="0" src="../images/right_list.gif" width="5" height="16"></td>
									</tr>
								</table>
							</td>
						</tr>
						<tr id="rad1" name="rad1" onmouseover="mus(this.name, 1);" onmouseout="mus(this.name, 2);"onclick="mus(this.name, 3);">
						  	<td class="text1" nowrap>&nbsp;Företag 1</td>
							<td class="text1" nowrap>&nbsp;Namn 1</td>
							<td class="text1" nowrap>&nbsp;BLÄ</td>
							<td class="text1" nowrap>&nbsp;2000-12-18</td>
						</tr>
						<tr id="rad2" name="rad2" onmouseover="mus(this.name, 1);" onmouseout="mus(this.name, 2);"onclick="mus(this.name, 3);">
							<td class="text1" nowrap>&nbsp;Företag 2</td>
							<td class="text1" nowrap>&nbsp;Namn 2</td>
							<td class="text1" nowrap>&nbsp;BLÄ</td>
							<td class="text1" nowrap>&nbsp;2000-11-30</td>
						</tr>
						<tr id="rad3" name="rad3" onmouseover="mus(this.name, 1);" onmouseout="mus(this.name, 2);"onclick="mus(this.name, 3);">
							<td class="text1" nowrap>&nbsp;Företag 3</td>
							<td class="text1" nowrap>&nbsp;Namn 3</td>
							<td class="text1" nowrap>&nbsp;BLÄ</td>
							<td class="text1" nowrap>&nbsp;2000-12-18</td>
						</tr>
						<tr id="rad4" name="rad4" onmouseover="mus(this.name, 1);" onmouseout="mus(this.name, 2);"onclick="mus(this.name, 3);">
							<td class="text1" nowrap>&nbsp;Företag 4</td>
							<td class="text1" nowrap>&nbsp;Namn 4</td>
							<td class="text1" nowrap>&nbsp;BLÄ</td>
							<td class="text1" nowrap>&nbsp;2000-11-30</td>
						</tr>
						<tr id="rad5" name="rad5" onmouseover="mus(this.name, 1);" onmouseout="mus(this.name, 2);"onclick="mus(this.name, 3);">
							<td class="text1" nowrap>&nbsp;Företag 5</td>
							<td class="text1" nowrap>&nbsp;Namn 5</td>
							<td class="text1" nowrap>&nbsp;BLÄ</td>
							<td class="text1" nowrap>&nbsp;2000-11-21</td>
						</tr>
						<tr id="rad6" name="rad6" onmouseover="mus(this.name, 1);" onmouseout="mus(this.name, 2);"onclick="mus(this.name, 3);">
							<td class="text1" nowrap>&nbsp;Företag 6</td>
							<td class="text1" nowrap>&nbsp;Namn 6</td>
							<td class="text1" nowrap>&nbsp;BLÄ</td>
							<td class="text1" nowrap>&nbsp;1999-10-18</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

------------------
~~~~~~~~~~~~~~~~~~~~
Silvio Fumei
silvio@fumei.net
www.fumei.net
~~~~~~~~~~~~~~~~~~~~

Engine^Medlem sedan dec. 20002 861 inlägg
#2

sätt dina document.all... som strängar och gör eval() på dom

var strBGColor = "document.all['+namn+'].style.backgroundColor = '+bgcolor';";
eval(strBGColor);

Jag tror att det kan fungera... för att få resten att fungera, så behöver du nog sätta ett id på alla celler som du behöver och sedan hämta värdena därur med strValue = id.innerText; tror jag, men det kanske du kan komma på själv hur du ska gå till väga?

------------------
Vem släckte lyset?

Genererad på 386 ms · cache AV · v20260730165559-full.f96bc7eb