Codigo para FireFox

dobled · #1 (**permalink**) 19/02/2005, 20:52

como hacer para que este codigo funcione en FireFox
Necesito esconder unas filas y mostrarlas al hacer click con la figura del mas y menos si alguien tiene otro codigo bienvenido sea

Código:

<html>
<head>
<script langauge="javascript">
<!--
function show(rowID) {
 if (eval('tr'+rowID+'.className')=="hide") {
      eval('tr'+rowID+'.className="show"')
      eval('img'+rowID+'.src="images/minus.gif"');
 }
 else {
      eval('tr'+rowID+'.className="hide"')
      eval('img'+rowID+'.src="images/plus.gif"');
 }
}
//-->
</script>
<style>
<!--
.hide        { visibility: hidden; display: none }
.show        { visibility: visible; display: block }
//-->
</style>
</head>
<body>

<table border=1 cellspacing=1 cellpadding=5>
  <tr>
    <td><a style="cursor:hand" onclick="show('1')"><img name="img1" border="0" src="images/plus.gif" width="10" height="10">
      Topic 1</a></td>
  </tr>
  <tr id="tr1" class="hide">
    <td>Information for Topic 1 here</td>
  </tr>
  <tr id="tr4" class="hide">
    <td>456454565</td>
  </tr>
  <tr>
    <td><a style="cursor:hand" onclick="show('2')"><img name="img2" border="0" src="images/plus.gif" width="10" height="10">
      Topic 2</a></td>
  </tr>
  <tr id="tr2" class="hide">
    <td>Information for Topic 2 here</td>
  </tr>
  <tr>
    <td><a style="cursor:hand" onclick="show('3')"><img name="img3" border="0" src="images/plus.gif" width="10" height="10">
      Topic 3</a></td>
  </tr>
  <tr id="tr3" class="hide">
    <td>Information for Topic 3 here</td>
  </tr>
</table>
</body>
</html>

thunder.scripts · #2 (**permalink**) 19/02/2005, 21:00

Podés hacerlo muy fácil con:

Código HTML:

<script type="text/javascript">

function mostrar(id, imgid) {
document.getElementById(id).style.display = 'block';
document.getElementById(imgid).src = 'minus.gif';
}

function ocultar(id, imgid) {
document.getElementById(id).style.display = 'none';
document.getElementById(imgid).src = 'plus.gif';
}

</script>

Y llamás a la función con el id del tr que quieras mostrar u ocultar (onclick="mostrar('tr2')").

Unas cosas que sé que a nadie le importan pero yo te las digo igual:

No tienes Doctype
LANGUAGE ESTÁ DESPRECIADO, usa type ;)
Los atributos de table no tienen comillas :S

Suerte
Fede

dobled · #3 (**permalink**) 19/02/2005, 21:06

no es mio hice un copy paste

lo probe y no hace nada!!

thunder.scripts · #4 (**permalink**) 19/02/2005, 21:08

eso quiere decir que no me entendiste lo de JavaScript? x q si queres te lo explico un poco más detallado, todo bien.

Suerte
Fede

dobled · #5 (**permalink**) 19/02/2005, 21:11

no es que sea flojo pero podrias hacerme el ejemplo please no me resulto

thunder.scripts · #6 (**permalink**) 19/02/2005, 21:28

En vez de hacerlo con tablas usé un par de divs, les puedes poner estilos y te quedan igual o mejor que con tablas.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<script type="text/javascript">

function show(id) {
         document.getElementById('_'+id).style.display = 'block';
         document.getElementById('img'+id).src = 'minus.gif';
         document.getElementById('link'+id).href = 'javascript:hide('+id+')';
}

function hide(id) {
         document.getElementById('_'+id).style.display = 'none';
         document.getElementById('img'+id).src = 'plus.gif';
         document.getElementById('link'+id).href = 'javascript:show('+id+')';
}

</script>

<style type="text/css">
.hide {  display: none; }
</style>
</head>
<body>

<div><a style="cursor:hand" href="javascript:show('1')" id="link1"><img id="img1" src="images/plus.gif" width="10" height="10">Topic 1</a></div>
         <div id="_1" class="hide">Information for Topic 1 here<br>
         456454565</div>

<div><a style="cursor:hand" href="javascript:show('2')" id="link2"><img id="img2" src="images/plus.gif" width="10" height="10">Topic 2</a></div>
         <div id="_2" class="hide">Information for Topic 2 here</div>

<div><a style="cursor:hand" href="javascript:show('3')" id="link3"><img id="img3" src="images/plus.gif" width="10" height="10">Topic 3</a>
         <div id="_3" class="hide">Information for Topic 3 here</div>
</html>

Lo probé en Opera, FF e IE, funciona en los tres ;)
Suerte,
Fede

dobled · #7 (**permalink**) 19/02/2005, 21:29

gracias master

como dice my baby FILETE .....

thunder.scripts · #8 (**permalink**) 19/02/2005, 21:32

De nada :D