getElementsByClassName ne fonctionne pas

J'ai codé une page php qui affiche les informations d'une base de données mysql dans des tableaux. Je souhaite masquer des lignes de table vides avec un gestionnaire d'événement onLoad.getElementsByClassName ne fonctionne pas

Voici un exemple de tableau avec du code qui cache un <td> lorsqu'il ne contient aucun contenu. mais je ne peux le faire fonctionner avec différents 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>

ce que je veux faire est d'utiliser une classe pour les <td> s pour obtenir la même chose tout en faisant référence uniquement la classe une fois, et non le référencement chaque identifiant unique que je veux supprimer, ce qui ne fonctionne même pas pour mon contenu dynamique. J'ai essayé d'utiliser ce 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>

mais cela ne fonctionne pas. il est supposé cacher les <td> vides qui ont la classe spécifiée. comment puis-je cacher <td> s en utilisant des classes, pas des ID?

Source

2010-07-28 new star

J'ai posté une réponse avec une fonction qui fonctionne comme un repli si getElementsByClassName n'existe pas –

Il y a plusieurs problèmes:

noms de classe (et ID) sont not allowed to start with a digit. Vous devez passer un cours à getElementsByClassName().
Vous devez parcourir le jeu de résultats.

Exemple (non testé):

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

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

Mise à jour:

Sinon, vous pouvez donner la table une carte d'identité et de l'utilisation:

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

pour obtenir tous les éléments td.

Pour masquer la ligne parent, utilisez la propriété parentNode de l'élément:

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

Source

2010-07-28 01:52:08

ça marche maintenant! mais si getElementsByClassName() n'est pas disponible dans IE, existe-t-il une autre façon de cacher un td vide sans faire référence à chacun d'entre eux? Aussi, y a-t-il un moyen de cacher le tout entier si le td est vide? Merci –

@ nouvelle étoile: S'il vous plaît voir ma réponse mise à jour. –

merci pour l'alternative! –

Si vous voulez le faire par ClassName que vous pourriez faire:

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

Source

2010-07-28 11:19:01

Répondre

Questions connexes