onclick href change td background_问答_开发者_运维开发者技术经验分享

I'm a complete n00b to both css and javascript so sorry if this might be something basic.. I'm trying to put together a table displaying a building overview. When the user clicks on any of the floor links, one table changes to another (theyre all within different divs. When the user moves the mouse over it displays more info about each individual unit, whether it is available for rent, sale, both or not available. What I am now trying to create is a few links that changes the background of each individual cell when clicked on. So for example, when clicking on show rental units, the background is changed on all cells with the id='rent' and 'both' review a demo here: http://encanto.ximg.co/overviewdemo.html

Heres the complete source code (including css) for the first table. I'm sure its a messup somewhere in me trying to show/hide the td cells too.. But i can only seem to find functions that tells the td to change color when you click on the td, not the href. As I said, i'm a complete n00b so please be gentle.

    <style type="text/css">
table.overview a {  
border:none;    
display: block; 
}

table.overview td {
    max-height:150px;
    max-width:150px;
    background:#96843c;
}

div.overview td:hover {
    background:#ffffff;
}

div.overview td.white {
    background:#ffffff;
}

div.overview    a {
color: #ffffff; 
text-decoration:none;
text-align:center;
letter-spacing: 1px; 
font-size:16px; 
line-height:32px; 
font-family:"Century Gothic", helvetica, sans-serif;
padding: 2px 5px;
}

div.overview    p   {
color:#96843c;
text-decoration:none;
text-align:center;
letter-spacing: 1px;
font-size:10px;
line-height:10px;
font-family:Georgia, "Times New Roman", Times, serif;
}

div.overview    a:hover {
color: #96843c;
background: #ffffff;
font-family: "Century Gothic";
}



</style>

<script type="text/javascript"><!--

function show_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "block";
}
}

function hide_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "none";
}
}
</script>

<table summary="" cellpadding="1" cellspacing="1" class="floor">

<tr>

<td>
<a href="#"onClick="show_visibility('floor1');hide_visibility('floor2');hide_visibility('penthouse') ">Ground Floor</a>
</td>

<td>
<a href="#" onClick="show_visibility('rental');show_visibility('both');hide_visibility('sales');hide_visibility('na') ">Show Rental Units</a>
</td>

</tr>

<tr>

<td>
<a href="#" onClick="show_visibility('floor2');hide_visibility('floor1');hide_visibility('penthouse')">1st Floor</a>
</td>

</tr>

<tr>

<td>
<a href="#" onClick="show_visibility('penthouse');hide_visibility('floor1');hide_visibility('floor2')">Penthouse</a></td>
</tr>
</table>


<div id='floor1' class="overview" style="display:none">

<table summary="" cellpadding="1" cellspacing="1" class="overview" width="630">


<tr>
<td colspan="12" height="25" class="white"></td>
</tr>
<tr>
<td colspan="1" rowspan="7" width="25" class="white"><img src="http://encanto.ximg.co/calle10.jpg" /></td>
<td colspan="8" height="25" class="white"><img src="http://encanto.ximg.co/adjacent.jpg" /></td>
<td colspan="1" rowspan="7" width="25" class="white"><img src="http://encanto.ximg.co/calle12.jpg" /></td>
<td colspan="1" rowspan="7" width="25" class="white"></td>
</tr>


<tr>
<td colspan="4" id="sale"><a href="http://www.encantoriviera.com/unit14/"onfocus="this.blur()"> 
14</a>
<p> 
<strong>FOR SALE</strong>
<br /> 
2 Bed/2 Bath 
<br /> 
1131 sq ft./105 sq m.
</p>
</a>
</td>

<td colspan="4" id="na"><a href="http://www.encantoriviera.com/real-estate/vacation-rentals/"onfocus="this.blur()">1</a>
<p>
<strong>NOT AVAILABLE</strong> 
<br /> 
2 Bed/2 Bath
<br /> 
1677 sq ft./156 sq m.
</p>
</a>

</td>
</tr>


<tr>
<td colspan="2" width="150" id="na"><a href="http://www.encantoriviera.com/"onfocus="this.blur()"> 
13
<p> 
<strong>NOT AVAILABLE</strong>
<br /> 
1 Bed/ 1.5 Bath
<br />
840 sq ft./78 sq m.
</p>
</a>

</td>
<td colspan="4" rowspan="4" width="300" class="white">
</td>

<td colspan="2" width="150" id="na"><a href="http://www.encantoriviera.com/"onfocus="this.blur()">
2
<p> 
<strong>NOT AVAILABLE</strong>
<br /> 
2 Bed/ 2 Bath
<br />
872 sq ft./82 sq m.
<br />  
</p>
</a>

</td>
</tr>

<tr>
<td colspan="2" width="150" id="sale"><a href="http://www.encantoriviera.com/unit12/"onfocus="this.blur()"> 
12
<p> 
<strong>FOR SALE</strong>
<br /> 
1 Bed/ 1.5 Bath
<br />
850 sq ft./79 sq m.
<br />  
</p>
</a>

<td colspan="2" width="150" id="na"><a href="http://www.encantoriviera.com/"onfocus="this.blur()"> 
3
<p> 
<strong>SOLD</strong>
<br /> 
2 Bed/ 2 Bath
<br />
1130 sq ft./105 sq m.
</p>
</a>

</td>
</tr>


<tr>

<td colspan="2" width="150" id="na"><a href="http://www.encantoriviera.com/"onfocus="this.blur()" > 
11
<p> 
<strong>NOT AVAILABLE</strong>
<br /> 开发者_JS百科
2 Bed/ 2 Bath
<br />
1071 sq ft./101 sq m.
<br />  
</p>
</a>


<td colspan="2" width="150" id="both"><a href="http://www.encantoriviera.com/unit4/"onfocus="this.blur()"> 
4
<p> 
<strong>FOR SALE AND RENT</strong>
<br /> 
2 Bed/ 2 Bath
<br />
1092 sq ft./101 sq m.
</p>
</a>
</td>
</tr>

<tr>

<td colspan="2" width="150" id="na"><a href="http://www.encantoriviera.com/"onfocus="this.blur()" >
10
<p> 
<strong>NOT AVAILABLE</strong>
<br /> 
2 Bed/ 2 Bath
<br />
1087 sq ft./101 sq m.
</p>
</a>

<td colspan="2" width="150" id="na"><a href="http://www.encantoriviera.com/"onfocus="this.blur()"> 
5
<p> 
<strong>SOLD</strong>
<br /> 
2 Bed/ 2 Bath
<br />
1092 sq ft./101 sq m.
</p>
</a>
</td>
</tr>

<tr>
<td colspan="2" width="150" id="na"><a href="http://www.encantoriviera.com/"onfocus="this.blur()"> 
9
<p> 
<strong>SOLD</strong>
<br /> 
2 Bed/ 2.5 Bath
<br />
1506 sq ft./140 sq m.
</p>
</a>

</td>

<td colspan="2" width="150" id="na"><a href="http://www.encantoriviera.com/unit8/"onfocus="this.blur()"> 
8
<p> 
<strong>FOR SALE AND RENT</strong>
<br /> 
1 Bed/ 1.5 Bath
<br />
915 sq ft./85 sq m.
</p>
</a>
</td>

<td colspan="2" width="150" id="sale"><a href="http://www.encantoriviera.com/unit7/"onfocus="this.blur()"> 
7
<p> 
<strong>FOR SALE</strong>
<br /> 
1 Bed/ 1 Bath
<br />
824 sq ft./75 sq m.
</p>
</a>

</td>

<td colspan="2" width="150" id="sale"><a href="http://www.encantoriviera.com/unit6/"onfocus="this.blur()">
6
<p> 
<strong>FOR SALE AND RENT</strong>
<br /> 
1 Bed/ 1.5 Bath
<br />
869 sq ft./81 sq m.
</p>
</a>

</td>

</tr>
<tr>
<td colspan="12" max-height="25" class="white"><img src="http://encanto.ximg.co/avenida20.jpg" /></td>
</tr>

</table>
</div>

You've got everything you need to get the intended result. The basic logic is there in both the JavaScript functions you've provided. You just need to tell JavaScript to change the backgroundColor instead of change the display attribute.

I would suggest making two new functions with more descriptive names (ex: highlightCell) and change what attribute gets changed inside the for loop.