Estoy tratando de realizar lo siguiente, tengo una tabla con celdas coloreadas en gris, cuando paso el mouse sobre ellas cambia a negro. Lo que me complica es hacer un efecto de selección de celdas cuando hago click en una de ellas, es decir, dejar en negro donde vaya pasando el mouse, pero a vez volverlas a gris si paso nuevamente por ellas. Algo así como seleccionar varios archivos.
El código que llevo es el siguiente:
Código:
<head>
<style>
th {background-color:#CCC;cursor:pointer;width:40px;height:40px;}
td {text-align:center;width:20px;font-family:Arial;}
</style>
<script type="text/javascript" language="javascript">
function cambiaColor1(id){
if(document.getElementById("marcando").value=="0")
id.style.backgroundColor="#000";
if(document.getElementById("marcando").value=="1"){
if(id.style.backgroundColor=="#000")
id.style.backgroundColor="#ccc";
if(id.style.backgroundColor=="#ccc")
id.style.backgroundColor="#000";
}
}
function cambiaColor2(id){
if(document.getElementById("marcando").value=="0"){
id.style.backgroundColor="#ccc";
}
if(document.getElementById("marcando").value=="1"){
id.style.backgroundColor="#000";
}
}
function marcaTodos(id){
if(document.getElementById("marcando").value=="0"){
document.getElementById("marcando").value="1";
}else{
document.getElementById("marcando").value="2";
}
id.style.backgroundColor="#000";
}
function Resetear(){
var enlaces = document.getElementsByTagName("th");
for(i=0;i<enlaces.length; i++){
enlaces[i].style.backgroundColor="#CCC";
}
document.getElementById("marcando").value="0";
}
</script>
</head>
<body>
<input type="hidden" id="marcando" name="marcando" value="0">
<table class="distabla">
<tr>
<td>01</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>11</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>21</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>31</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
</tr>
<tr>
<td>02</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>12</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>22</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>32</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
</tr>
<tr>
<td>03</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>13</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>23</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>33</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
</tr>
<tr>
<td>04</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>14</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>24</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>34</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
</tr>
<tr>
<td>05</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>15</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>25</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>35</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
</tr>
<tr>
<td>06</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>16</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>26</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>36</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
</tr>
<tr>
<td>07</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>17</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>27</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>37</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
</tr>
<tr>
<td>08</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>18</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>28</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>38</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
</tr>
<tr>
<td>09</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>19</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>29</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>39</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
</tr>
<tr>
<td>10</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>20</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>30</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
<td>40</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);"> </th>
</tr>
</table>
<input type="button" value="Reset" onClick="Resetear();">
</body>
