Codiguillos de JavierB

Iluminar filas/columnas en una tabla

Con este código podemos hacer que se cambie el color de fondo de las filas o columnas de una tabla, cuando pasa el ratón por encima. He añadido dos checkbox para elegir si queremos que se ilumines las filas, las columnas, las dos o ninguna.

Habría que poner a cada etiqueta <td> la llamada a la función iluminar() pero es bastante tedioso, así que he añadido la función ini() para que haga el trabajo sucio.

Ver ejemplo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Mostrar/ocultar filas y columnas</title>
<style type="text/css">
table {border-collapse:collapse;border:1px solid maroon;margin-left:80px}
td {border:1px solid maroon;width:30px;text-align:center}
</style>
<script type="text/javascript">
<!--
function ini() {
  tab=document.getElementById('tabla');
  for (i=0; ele=tab.getElementsByTagName('td')[i]; i++) {
    ele.onmouseover = function() {iluminar(this,true)}
    ele.onmouseout = function() {iluminar(this,false)} 
  }
}

function iluminar(obj,valor) {
  fila = obj.parentNode;
  if (document.getElementById('filas').checked) {
    for (i=0; ele = fila.getElementsByTagName('td')[i]; i++)
      ele.style.background = (valor) ? 'yellow' : '';
  }
      
  if (document.getElementById('columnas').checked) {
    tab=document.getElementById('tabla');
    for (i=0; ele=fila.getElementsByTagName('td')[i]; i++)
      if (ele==obj) num=i
      
    for (i=0; ele=tab.getElementsByTagName('tr')[i]; i++)
      ele.getElementsByTagName('td')[num].style.background = (valor) ? 'yellow' : '';
  }
}
-->
</script>
</head>
<body onload="ini()">
<p>
Filas: <input type="checkbox" name="filas" id="filas" />
Columnas: <input type="checkbox" id="columnas" />
</p>
<table id="tabla" border="1">
<tr>
<td>1.1</td><td>1.2</td><td>1.3</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
</tr>
<tr>
<td>3.1</td><td>3.2</td><td>3.3</td>
</tr>
</table>
</body>
</html>

Subir Subir