web-dev-qa-db-ja.com

getElementsByClassNameが機能しない

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>sのクラスを使用して同じことを達成し、クラスを1回だけ参照し、削除するすべての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>sを非表示にすることになっています。 IDではなくクラスを使用して空の<td>sを非表示にするにはどうすればよいですか？

javascriptwebformshtml-tabledynamic-data
13
new star

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

  1. クラス名（およびID）は 数字で始めることはできません です。
  2. クラスをgetElementsByClassName()に渡す必要があります。
  3. 結果セットを反復する必要があります。

例（untested）：

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

ClassNameで実行する場合は、次のようにできます。

<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