getElementsByClassName no funciona

Codifiqué una página php que muestra información de una base de datos mysql ordenadamente en tablas. Me gustaría ocultar las filas de la tabla vacía con un controlador de eventos onLoad.getElementsByClassName no funciona

Aquí hay una tabla de muestra con código que oculta un <td> cuando no tiene contenido. Pero sólo puedo conseguir que funcione con diferentes ID:

 <script type="text/javascript"> 
     function hideTd(id){ 
      if(document.getElementById(id).textContent == ''){ 
       document.getElementById(id).style.display = 'none'; 
      } 
      } 
     </script> 
     </head> 
     <body onload="hideTd('1');hideTd('2');hideTd('3');"> 
     <table border="1"> 
      <tr> 
      <td id="1">not empty</td> 
      </tr> 
      <tr> 
      <td id="2"></td> 
      </tr> 
      <tr> 
      <td id="3"></td> 
      </tr> 
     </table> 
    </body>

lo que quiero hacer es utilizar una clase para los <td> s para lograr lo mismo, mientras que sólo hace referencia a la clase una vez, y no se hace referencia a cada uno de Identificación que quiero eliminar, que ni siquiera funcionará para mi contenido dinámico. Intenté usar este código:

<script type="text/javascript"> 
    function hideTd(){ 
     if(document.getElementsByClassName().textContent == ''){ 
      document.getElementsByClassName().style.display = 'none'; 
     } 
     } 
    </script> 
    </head> 
    <body onload="hideTd('1');"> 
    <table border="1"> 
     <tr> 
     <td class="1">not empty</td> 
     </tr> 
     <tr> 
     <td class="1"></td> 
     </tr> 
     <tr> 
     <td class="1"></td> 
     </tr> 
    </table> 
</body>

pero no funciona. se supone que debe ocultar los <td> vacíos que tienen la clase especificada. ¿Cómo oculto <td>s vacío usando clases, no ID?

Fuente

2010-07-28 new star

He publicado una respuesta con una función que funciona como alternativa si getElementsByClassName no existe –

Hay varias cuestiones:

Los nombres de clase (y) son identificadores not allowed to start with a digit.
Tienes que pasar una clase a getElementsByClassName().
Tiene que iterar del conjunto de resultados.

Ejemplo (no probado):

<script type="text/javascript"> 
function hideTd(className){ 
    var elements = document.getElementsByClassName(className); 
    for(var i = 0, length = elements.length; i < length; i++) { 
     if(elements[i].textContent == ''){ 
      elements[i].style.display = 'none'; 
     } 
    } 

    } 
</script> 
</head> 
<body onload="hideTd('td');"> 
<table border="1"> 
    <tr> 
    <td class="td">not empty</td> 
    </tr> 
    <tr> 
    <td class="td"></td> 
    </tr> 
    <tr> 
    <td class="td"></td> 
    </tr> 
</table> 
</body>

Nota que getElementsByClassName()is not available up to and including IE8.

Actualización:

alternativa, se puede dar a la mesa de una identificación y uso:

var elements = document.getElementById('tableID').getElementsByTagName('td');

para obtener todos los elementos td.

Para ocultar la fila principal, utilice la propiedad parentNode del elemento:

elements[i].parentNode.style.display = "none";

Fuente

2010-07-28 01:52:08

¡está funcionando ahora! pero si getElementsByClassName() no está disponible en IE, ¿hay alguna forma alternativa de ocultar un td vacío sin hacer referencia a cada uno? Además, ¿hay alguna manera de ocultar todo tr si el td está vacío? Gracias –

@new star: Por favor vea mi respuesta actualizada. –

gracias por la alternativa! –

Si desea hacerlo por NombredeClase que podría hacer:

<script type="text/javascript"> 
function hideTd(className){ 
    var elements; 

    if (document.getElementsByClassName) 
    { 
     elements = document.getElementsByClassName(className); 
    } 
    else 
    { 
     var elArray = []; 
     var tmp = document.getElementsByTagName(elements); 
     var regex = new RegExp("(^|\\s)" + className+ "(\\s|$)"); 
     for (var i = 0; i < tmp.length; i++) { 

      if (regex.test(tmp[i].className)) { 
       elArray.push(tmp[i]); 
      } 
     } 

     elements = elArray; 
    } 

    for(var i = 0, i < elements.length; i++) { 
     if(elements[i].textContent == ''){ 
      elements[i].style.display = 'none'; 
     } 
    } 

    } 
</script>

Fuente

2010-07-28 11:19:01

Respuesta

Cuestiones relacionadas