web-dev-qa-db-fra.com

getElementsByClassName ne fonctionne pas

J'ai codé une page php qui affiche soigneusement les informations d'une base de données mysql dans des tableaux. Je voudrais masquer les lignes de table vides avec un gestionnaire d'événements onLoad.

Voici un exemple de table avec du code qui cache un <td> lorsqu'il n'a pas de contenu. mais je ne peux que 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, c'est utiliser une classe pour le <td>s pour réaliser la même chose en ne référençant la classe qu'une seule fois, et en ne référençant pas chaque identifiant que je veux supprimer, ce qui ne fonctionnera 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 ça ne marche pas. son censé cacher le vide <td>s qui ont la classe spécifiée. comment cacher vide <td> utilise des classes, pas des ID?

javascriptwebformshtml-tabledynamic-data
13
new star

Il y a plusieurs problèmes:

  1. Les noms de classe (et les ID) sont pas autorisés à commencer par un chiffre .
  2. Vous devez passer une classe à getElementsByClassName().
  3. Vous devez répéter l'ensemble 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()n'est pas disponible jusqu'à IE8 inclus .

Mise à jour:

Vous pouvez également attribuer un ID à la table et utiliser:

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";
37
Felix Kling

Si vous voulez le faire par ClassName, vous pouvez 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>
1
TmEllis