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!!!!