getElementsByClassName funktioniert nicht

Ich habe eine PHP-Seite codiert, die Informationen aus einer MySQL-Datenbank sauber in Tabellen anzeigt. Ich möchte leere Tabellenzeilen mit einem onLoad Event-Handler ausblenden.getElementsByClassName funktioniert nicht

Hier ist eine Beispieltabelle mit Code, der eine <td> verbirgt, wenn es keinen Inhalt hat. aber ich kann nur bekommen es mit unterschiedlichen IDs zu arbeiten:

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

was ich will ist tun, um eine Klasse verwenden für die <td> s die gleiche Sache zu erreichen, während nur die Klasse einmal Referenzierung, und nicht Referenzierung jede einzelne ID das möchte ich entfernen, was bei meinen dynamischen Inhalten gar nicht funktioniert. Ich habe versucht, mit diesem Code:

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

aber es funktioniert nicht. es soll die leeren <td> s verstecken, die die angegebene Klasse haben. Wie verstecke ich leere <td> s mit Klassen, nicht IDs?

Quelle

2010-07-28 new star

Ich habe eine Antwort geschrieben mit eine Funktion, die als Fallback funktioniert, wenn getElementsByClassName nicht existiert –

Es gibt mehrere Probleme:

Klassennamen (und IDs) sind not allowed to start with a digit. Sie müssen eine Klasse an getElementsByClassName() übergeben.
Sie müssen die Ergebnismenge iterieren.

Beispiel (ungetestete):

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

anzumerken, dass getElementsByClassName()is not available up to and including IE8.

Update:

Alternativ können Sie die Tabelle eine ID und Verwendung geben:

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

alle td Elemente zu erhalten.

die Elternzeile, verwenden Sie die parentNode Eigenschaft des Elements zu verbergen:

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

Quelle

2010-07-28 01:52:08

es funktioniert jetzt! Aber wenn getElementsByClassName() in IE nicht verfügbar ist, gibt es eine alternative Möglichkeit, ein leeres td auszublenden, ohne jedes zu referenzieren? Gibt es auch eine Möglichkeit, den ganzen tr zu verstecken, wenn der td leer ist? Danke –

@new star: Bitte sehen Sie meine aktualisierte Antwort. –

danke für die Alternative! –

Wenn Sie es von Class tun möchten Sie tun könnten:

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

Quelle

2010-07-28 11:19:01

getElementsByClassName funktioniert nicht

Antwort

Verwandte Themen