getElementsByClassName 不起作用[重复]答案

【问题标题】：getElementsByClassName not working [duplicate]getElementsByClassName 不起作用[重复]
【发布时间】：2011-03-21 22:20:01
【问题描述】：

我编写了一个 php 页面，该页面将 mysql 数据库中的信息整齐地显示到表格中。我想用 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 的类来实现同样的事情，同时只引用该类一次，而不是引用我想要删除的每个 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？

【问题讨论】：

我已经发布了一个答案，如果 getElementsByClassName 不存在，该函数可以作为后备

标签： javascript webforms html-table dynamic-data

【解决方案1】：

有几个问题：

类名（和 ID）是 not allowed to start with a digit。
您必须将课程传递给getElementsByClassName()。
您必须迭代结果集。

示例（未经测试）：

<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()is not available up to and including IE8。

更新：

或者，您可以给表格一个 ID 并使用：

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

获取所有td 元素。

要隐藏父行，请使用元素的parentNode 属性：

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

【讨论】：

它现在可以工作了！但如果 getElementsByClassName() 在 IE 中不可用，是否有另一种方法可以隐藏空 td 而无需引用每个 td？另外，如果 td 为空，有没有办法隐藏整个 tr ？谢谢
@new star：请看我更新的答案。
更新：getElementsByClassName() 在 IE9 中有效。

【解决方案2】：

如果你想通过 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>

【讨论】：