Don't want text to be marked when clicking multiple times on it.

  • Thread starter Thread starter tonicvodka
  • Start date Start date
T

tonicvodka

Hi all!

I've made a table over all the weeks in a year in a table. Where the
week number is inside the td tag.

When you want to reserve a certain week you click on it once and it
changes color to blue for preliminary, clicking it twice makes it
red(booked) and a third time brings it back to green(available). The
problem is the number inside the cell gets marked when you are clicking
it. Is there a way to prevent this?
 
Post a code snippet of the script you are using to change the colors (including a cell it is applied to)

--




| Hi all!
|
| I've made a table over all the weeks in a year in a table. Where the
| week number is inside the td tag.
|
| When you want to reserve a certain week you click on it once and it
| changes color to blue for preliminary, clicking it twice makes it
| red(booked) and a third time brings it back to green(available). The
| problem is the number inside the cell gets marked when you are clicking
| it. Is there a way to prevent this?
|
 
Here goes:
<html>
<head>
</head>
<body>
<style>
.weekUndecided { BORDER-STYLE: solid; BORDER-COLOR: gray;
BORDER-WIDTH: 1px; BACKGROUND-COLOR: silver; TEXT-ALIGN: center;
CURSOR: hand; }
.weekAvailable { BORDER-STYLE: solid; BORDER-COLOR: green;
BORDER-WIDTH: 1px; BACKGROUND-COLOR: lightgreen; TEXT-ALIGN: center;
CURSOR: hand; }
.weekReserved { BORDER-STYLE: solid; BORDER-COLOR: blue; BORDER-WIDTH:
1px; BACKGROUND-COLOR: cyan; TEXT-ALIGN: center; CURSOR: hand; }
.weekSublet { BORDER-STYLE: solid; BORDER-COLOR: red; BORDER-WIDTH:
1px; BACKGROUND-COLOR: pink; TEXT-ALIGN: center; CURSOR: hand; }
</style>

<script>
function switchStatus(obj)
{
if(obj.className == "weekUndecided")
{
obj.className = "weekAvailable";
}
else
{
if(obj.className == "weekAvailable")
{
obj.className = "weekReserved";
}
else
{
if(obj.className == "weekReserved")
{
obj.className = "weekSublet";
}
else
{
obj.className = "weekUndecided";
}
}
}
}
</script>
<table cellpadding=2 cellspacing=4 border=0 ID="Table1">
<tr>
<td id="week1" class="weekUndecided" onclick="switchStatus(this);"
runat="server">1</td>
<td id="week2" class="weekUndecided" onclick="switchStatus(this);"
runat="server">2</td>
<td id="week3" class="weekUndecided" onclick="switchStatus(this);"
runat="server">3</td>
<td id="week4" class="weekUndecided" onclick="switchStatus(this);"
runat="server">4</td>
<td id="week5" class="weekUndecided" onclick="switchStatus(this);"
runat="server">5</td>
<td id="week6" class="weekUndecided" onclick="switchStatus(this);"
runat="server">6</td>
<td id="week7" class="weekUndecided" onclick="switchStatus(this);"
runat="server">7</td>
<td id="week8" class="weekUndecided" onclick="switchStatus(this);"
runat="server">8</td>
<td id="week9" class="weekUndecided" onclick="switchStatus(this);"
runat="server">9</td>
<td id="week10" class="weekUndecided" onclick="switchStatus(this);"
runat="server">10</td>
<td id="week11" class="weekUndecided" onclick="switchStatus(this);"
runat="server">11</td>
<td id="week12" class="weekUndecided" onclick="switchStatus(this);"
runat="server">12</td>
<td id="week13" class="weekUndecided" onclick="switchStatus(this);"
runat="server">13</td>
<td id="week14" class="weekUndecided" onclick="switchStatus(this);"
runat="server">14</td>
<td id="week15" class="weekUndecided" onclick="switchStatus(this);"
runat="server">15</td>
<td id="week16" class="weekUndecided" onclick="switchStatus(this);"
runat="server">16</td>
<td id="week17" class="weekUndecided" onclick="switchStatus(this);"
runat="server">17</td>
<td id="week18" class="weekUndecided" onclick="switchStatus(this);"
runat="server">18</td>
</tr>
<tr>
<td id="week19" class="weekUndecided" onclick="switchStatus(this);"
runat="server">19</td>
<td id="week20" class="weekUndecided" onclick="switchStatus(this);"
runat="server">20</td>
<td id="week21" class="weekUndecided" onclick="switchStatus(this);"
runat="server">21</td>
<td id="week22" class="weekUndecided" onclick="switchStatus(this);"
runat="server">22</td>
<td id="week23" class="weekUndecided" onclick="switchStatus(this);"
runat="server">23</td>
<td id="week24" class="weekUndecided" onclick="switchStatus(this);"
runat="server">24</td>
<td id="week25" class="weekUndecided" onclick="switchStatus(this);"
runat="server">25</td>
<td id="week26" class="weekUndecided" onclick="switchStatus(this);"
runat="server">26</td>
<td id="week27" class="weekUndecided" onclick="switchStatus(this);"
runat="server">27</td>
<td id="week28" class="weekUndecided" onclick="switchStatus(this);"
runat="server">28</td>
<td id="week29" class="weekUndecided" onclick="switchStatus(this);"
runat="server">29</td>
<td id="week30" class="weekUndecided" onclick="switchStatus(this);"
runat="server">30</td>
<td id="week31" class="weekUndecided" onclick="switchStatus(this);"
runat="server">31</td>
<td id="week32" class="weekUndecided" onclick="switchStatus(this);"
runat="server">32</td>
<td id="week33" class="weekUndecided" onclick="switchStatus(this);"
runat="server">33</td>
<td id="week34" class="weekUndecided" onclick="switchStatus(this);"
runat="server">34</td>
<td id="week35" class="weekUndecided" onclick="switchStatus(this);"
runat="server">35</td>
<td id="week36" class="weekUndecided" onclick="switchStatus(this);"
runat="server">36</td>
</tr>
<tr>
<td id="week37" class="weekUndecided" onclick="switchStatus(this);"
runat="server">37</td>
<td id="week38" class="weekUndecided" onclick="switchStatus(this);"
runat="server">38</td>
<td id="week39" class="weekUndecided" onclick="switchStatus(this);"
runat="server">39</td>
<td id="week40" class="weekUndecided" onclick="switchStatus(this);"
runat="server">40</td>
<td id="week41" class="weekUndecided" onclick="switchStatus(this);"
runat="server">41</td>
<td id="week42" class="weekUndecided" onclick="switchStatus(this);"
runat="server">42</td>
<td id="week43" class="weekUndecided" onclick="switchStatus(this);"
runat="server">43</td>
<td id="week44" class="weekUndecided" onclick="switchStatus(this);"
runat="server">44</td>
<td id="week45" class="weekUndecided" onclick="switchStatus(this);"
runat="server">45</td>
<td id="week46" class="weekUndecided" onclick="switchStatus(this);"
runat="server">46</td>
<td id="week47" class="weekUndecided" onclick="switchStatus(this);"
runat="server">47</td>
<td id="week48" class="weekUndecided" onclick="switchStatus(this);"
runat="server">48</td>
<td id="week49" class="weekUndecided" onclick="switchStatus(this);"
runat="server">49</td>
<td id="week50" class="weekUndecided" onclick="switchStatus(this);"
runat="server">50</td>
<td id="week51" class="weekUndecided" onclick="switchStatus(this);"
runat="server">51</td>
<td id="week52" class="weekUndecided" onclick="switchStatus(this);"
runat="server">52</td>
<td id="week53" class="weekUndecided" onclick="switchStatus(this);"
runat="server">53</td>
</tr>
</table>
</body>
</html>
 
Hi again!

Below is better, just one week:

<html>
<head></head>
<body>
<style>
.weekAvailable { BORDER-STYLE: solid; BORDER-COLOR: green;
BORDER-WIDTH: 1px; BACKGROUND-COLOR: lightgreen; TEXT-ALIGN: center;
CURSOR: hand; }
.weekReserved { BORDER-STYLE: solid; BORDER-COLOR: blue; BORDER-WIDTH:
1px; BACKGROUND-COLOR: cyan; TEXT-ALIGN: center; CURSOR: hand; }
.weekSublet { BORDER-STYLE: solid; BORDER-COLOR: red; BORDER-WIDTH:
1px; BACKGROUND-COLOR: pink; TEXT-ALIGN: center; CURSOR: hand; }
</style>

<script>
function switchStatus(obj)
{
if(obj.className == "weekAvailable")
{
obj.className = "weekReserved";
}
else
{
if(obj.className == "weekReserved")
{
obj.className = "weekSublet";
}
else
{
obj.className = "weekAvailable";
}
}
}
</script>
<table cellpadding=2 cellspacing=4 border=0 ID="Table1">
<tr><td id="week1" class="weekAvailable" onclick="switchStatus(this);"
runat="server">52</td></tr>
</table>
</body>
</html>
 
Back
Top