webForumDet fria alternativet

Markera cell

JavaScript

7 svar · 787 visningar · startad av jonne

Medlem sedan jan. 20011 154 inlägg
Frågan#1

Är ute efter något liknande som när man arbetar i oulooks kalender. Jag vill kunna rita upp en html tabell och sedan ha möjlighet att klicka på valfria celler och när jag trycker på en knapp på sidan så skickas värdena ur dessa celler vidare. Till exempel 12:00, 13:30 etc
Detta ska användas på en kalendersida för val av tidpunkter. Någon som har några förslag?

Medlem sedan dec. 20025 483 inlägg
#2

Jag har ingen erfarenhet av Outlooks kalender. Har du ett exempel på HTML-tabell att utgå från? Att markera en cell, spara undan värden och kunna skicka informationen vidare skall inte vara några problem.

Medlem sedan jan. 20011 154 inlägg
#3

Inget specifikt för just outlook.
Ponera att jag har bara en vanlig html tabell med säg 4 rader och en kolumn. Hur skulle jag göra för att plocka ut dessa värden? Håller på med en egenbyggd kalender som det skulle vara aktuellt till.
Bara vanlig enkel html

<table width="200" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td>12:00</td>
	</tr>
	<tr>
		<td>13:00</td>
	</tr>
	<tr>
		<td>14:00</td>
	</tr>
	<tr>
		<td>15:00</td>
	</tr>
</table>

Hur skulle jag göra för att markera 13:00 och 14:00 och kunna skicka vidare de värdena till en annan sida? Behövs bara för sammanhängande serier av celler om det spelar någon roll. Alltså inte exv. cell ett och cell tre.

Medlem sedan dec. 20025 483 inlägg
#4

Exempel:

<script type="text/javascript">
function regValue(c)
{
  var h = document.forms[0].elements["values"];
  if (new RegExp("(" + c.innerHTML + ";)").test(h.value)){
    c.style.backgroundColor = "#fff";
    h.value = h.value.replace(new RegExp(RegExp.$1), "");
  } else {
    c.style.backgroundColor = "#eee";
    h.value += c.innerHTML + ";";
  }
}
</script>

<style type="text/css">
td {
  cursor: pointer;
}
</style>

<form>
	<table width="200" border="1" cellspacing="0" cellpadding="0">
		<tr>
			<td onclick="regValue(this)">12:00</td>
		</tr>
		<tr>
			<td onclick="regValue(this)">13:00</td>
		</tr>
		<tr>
			<td onclick="regValue(this)">14:00</td>
		</tr>
		<tr>
			<td onclick="regValue(this)">15:00</td>
		</tr>
	</table>
	<input type="hidden" name="values">
	<a href="javascript:void(document.forms[0].submit())">Send values!</a>
</form>
Medlem sedan jan. 20011 154 inlägg
#5

Oh du din lilla pärla. Precis vad jag var ute efter! Tackar :)

Medlem sedan jan. 20011 154 inlägg
#6

Föresten en liten utveckling ... om jag skulle vilja sätta värdet på cellen till att vara något annat än visningsnamnet? Exv 1200 istället för 12:00 ?

Medlem sedan dec. 20025 483 inlägg
#7

Då kan vi göra så här:

function regValue(c)
{
  var h = document.forms[0].elements["values"];
  if (new RegExp("(" + c.innerHTML.replace(/:/,"") + ";)").test(h.value)){
    c.style.backgroundColor = "#fff";
    h.value = h.value.replace(new RegExp(RegExp.$1), "");
  } else {
    c.style.backgroundColor = "#eee";
    h.value += c.innerHTML.replace(/:/,"") + ";";
  }
}

Skulle värdet på cellen vara orelaterat till visningsnamnet, t.ex. {"12:00", "xyz123"}, kan du överväga att använda id-attributet på <td>-taggen och där lägga värdet:

<script type="text/javascript">
function regValue(c)
{
  var h = document.forms[0].elements["values"];
  if (new RegExp("(" + c.id + ";)").test(h.value)){
    c.style.backgroundColor = "#fff";
    h.value = h.value.replace(new RegExp(RegExp.$1), "");
  } else {
    c.style.backgroundColor = "#eee";
    h.value += c.id + ";";
  }
}
</script>

<style type="text/css">
td {
  cursor: pointer;
}
</style>

<form>
	<table width="200" border="1" cellspacing="0" cellpadding="0">
		<tr>
			<td id="alfa123" onclick="regValue(this)">12:00</td>
		</tr>
		<tr>
			<td id="beta765" onclick="regValue(this)">13:00</td>
		</tr>
		<tr>
			<td id="gamma456" onclick="regValue(this)">14:00</td>
		</tr>
		<tr>
			<td id="delta987" onclick="regValue(this)">15:00</td>
		</tr>
	</table>
	<input type="hidden" name="values">
	<a href="javascript:void(document.forms[0].submit())">Send values!</a>
</form>
Medlem sedan jan. 20011 154 inlägg
#8

Lysande! Stort tack!

544 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
131 ms — deklarationer (db)
0 ms — hämta statistik (cache)
410 ms — hämta tråd, inlägg och bilagor (db)
129 ms — ändringar (db)