Foros del Web - Ver Mensaje Individual

ElJavista · #4 (**permalink**) 19/03/2010, 22:14

Lo acabo de resolver, aquí está el ejemplo de como hacerlo.

Código:

<html>
<head>

<style type="text/css">
	.sombra {
		background-color: #FFE4AF;
	}
	#miTabla tr:hover td {
		background-color: #FFA500;
	}
</style>

<script type="text/javascript">

function get(id) {
   return document.getElementById(id);
}
function getObj(obj) {
   if (typeof obj == 'string') obj = get(obj);
   return obj;
}

function gtn(obj, tag) {
   return getObj(obj).getElementsByTagName(tag);
}

function listen(event, elem, func) {
    elem = getObj(elem);
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(event,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+event, func);
	return r;
    }
    else throw 'No es posible añadir evento';
}

var tds; 
var nc;

window.onload = function() {
	var idTabla = 'miTabla';

	nc = get(idTabla).rows[0].cells.length;
	tds = gtn(idTabla, 'td');	
   
   	for (var i = 0; i < tds.length; i ++) {
	    listen('mouseover', tds[i], overTD);	
	    listen('mouseout', tds[i], outTD);
	}
}

function isIE() {
	var nav = navigator.appName
	if (nav == 'Microsoft Internet Explorer') return true;
	else return false;
}

function overTD(evt) {
	if (isIE()) obj = evt.srcElement;
	else obj = evt.target;

	var col = obj.cellIndex;
	for (var i = col; i < tds.length; i += nc) {
	    tds[i].className = 'sombra'; 
	}
}
function outTD(evt) {
	if (isIE()) obj = evt.srcElement;
	else obj = evt.target;

	var col = obj.cellIndex;

	for (var i = col; i < tds.length; i += nc) {
	    tds[i].className = ''; 
	}
}
</script>
</head>

<body>

<table id="miTabla">
  <tr>
     <td>11</td> <td>12</td> <td> 13</td>
  </tr>
  <tr>
     <td>21</td> <td>22</td> <td> 23</td>
  </tr>
  <tr>
     <td>31</td> <td>32</td> <td> 33</td>
  </tr>
</table>

</body>
</html>

Lo he modificado un poco para optimizarlo. Espero que les sirva.