getElementsByClassName non funziona

Ho codificato una pagina php che visualizza le informazioni da un database mysql ordinatamente nelle tabelle. Vorrei nascondere le righe della tabella vuota con un gestore di eventi onLoad.getElementsByClassName non funziona

Ecco una tabella di esempio con codice che nasconde un <td> quando non ha contenuto. ma posso solo farlo funzionare con diversi 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>

quello che voglio fare è utilizzare una classe per i <td> s per ottenere la stessa cosa, mentre solo riferimento alla classe di una volta, e non fa riferimento a ogni singolo id che voglio rimuovere, che non funzionerà nemmeno per i miei contenuti dinamici. Ho provato a utilizzare questo codice:

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

ma non funziona. si suppone che nascondano i vuoti <td> s che hanno la classe specificata. Come nascondo vuoto <td> s utilizzando le classi, non gli ID?

fonte

2010-07-28 new star

ho postato una risposta con una funzione che funziona come fallback se getElementsByClassName non esiste –

Ci sono diverse questioni:

nomi di classe (e ID) sono not allowed to start with a digit.
È necessario passare una classe a getElementsByClassName().
Devi eseguire iterazione del set di risultati.

Esempio (non testata ):

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

noti che getElementsByClassName()is not available up to and including IE8.

Aggiornamento:

In alternativa si può dare al tavolo un ID ed impiego:

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

per ottenere tutti gli elementi td.

Per nascondere la riga padre, utilizzare la proprietà parentNode dell'elemento:

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

fonte

2010-07-28 01:52:08

funziona ora! ma se getElementsByClassName() non è disponibile in IE, esiste un modo alternativo per nascondere un td vuoto senza fare riferimento a ciascuno di essi? Inoltre, c'è un modo per nascondere l'intero tr se il td è vuoto? Grazie –

@new star: Si prega di consultare la mia risposta aggiornata. –

grazie per l'alternativa! Aggiornamento –

Se si vuole fare da NomeClasse si potrebbe fare:

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

fonte

2010-07-28 11:19:01

risposta

Problemi correlati