obtener id de forma atomática para getElementById

akziag69 · #1 (**permalink**) 22/07/2008, 23:07

A ver si me explico:
Uso una tabla con varias lineas y en cada una de ellas quiero que se pueda desplegar un contenido.
El código javascript que utilizo funciona correctamente pero el problema viene cuando quiero insertar o eliminar nuevas lineas de la tabla.
Al insertar una nueva linea me veo obligado a modificar el id en el resto de las lineas....
Me gustaría conocer la manera de poder asignar y eliminar de forma automática una id a cada linea para que la función sepa que capa tiene que abrir u ocultar.

Código:

<script type="text/javascript">
function shToggle(content) {
if (document.getElementById(content).style.display == "none")
document.getElementById(content).style.display = "block"
else
document.getElementById(content).style.display = "none"
}
</script>

Código:

<table>
  <tr>
    <td>
    <a href="javascript:void(0);" onclick="shToggle('id1'); return false;">[Mostrar|Ocultar]</a><div id="id1" style="display:none;">contenido</div>
   </td>
  </tr>
  <tr>
    <td>
    <a href="javascript:void(0);" onclick="shToggle('id2'); return false;">[Mostrar|Ocultar]</a><div id="id2" style="display:none;">contenido</div>
   </td>
  </tr>
</table>

Panino5001 · #2 (**permalink**) 22/07/2008, 23:33

Lo mejor es no usar el id en este caso (no siempre conviene referenciar usando id). Una alternativa:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<script type="text/javascript"> 
function shToggle(obj) { 
if (obj.nextSibling.style.display == "none") 
obj.nextSibling.style.display = "block" 
else 
obj.nextSibling.style.display = "none" 
} 
</script> 
</head> 
 
<body> 
<table> 
  <tr> 
    <td> 
    <a href="javascript:void(0);" onclick="shToggle(this); return false;">[Mostrar|Ocultar]</a><div id="id1" style="display:none;">contenido</div> 
   </td> 
  </tr> 
  <tr> 
    <td> 
    <a href="javascript:void(0);" onclick="shToggle(this); return false;">[Mostrar|Ocultar]</a><div id="id2" style="display:none;">contenido</div> 
   </td> 
  </tr> 
</table> 
</body> 
</html>

akziag69 · #3 (**permalink**) 23/07/2008, 04:18

Genial!!!
Me funciona perfecto!!!!