BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] getElementsByClassNameが動作しない [重複].

2022-01-26 21:47:35

質問

私は、mysqlデータベースからの情報をテーブルに整然と表示するPHPページをコーディングしました。onLoadイベントハンドラで、空のテーブル行を隠したいのですが。

を非表示にするコードを含むサンプルテーブルです。 <td> しかし、私はそれが異なる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>

のクラスを使いたいのです。 <td> を使えば同じことができますが、クラスを参照するのは一度だけで、削除したい ID をいちいち参照する必要はありませんし、動的なコンテンツには使えません。このコードを使ってみました。 

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

を隠すはずなのですが、うまくいきません。 <td> 指定されたクラスを持つ空の <td> はIDではなくクラスを使っているのですか？

どのように解決するのですか？

いくつかの問題があります。

  1. クラス名（とID）が 数字で始めてはいけない .
  2. にクラスを渡す必要があります。 getElementsByClassName() .
  3. 結果セットを反復する必要があります。

例( 未検証 ): 

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

なお getElementsByClassName() はIE8までは使用できません .

更新しました。

あるいは、テーブルにIDを与えて使用することもできます。 

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

をすべて取得するために td 要素で構成されます。

親行を非表示にするには parentNode プロパティを指定します。 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します