getElementsByClassName不工作

我编写了一个php页面，它将mysql数据库中的信息整齐地显示到表格中。我想用onLoad事件处理程序隐藏空表行。getElementsByClassName不工作

下面是一个代码示例，它在没有内容时隐藏<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？

来源

2010-07-28 new star

我已经张贴一个答案如果getElementsByClassName不存在，则作为后备工作的函数 – 2010-08-02 14:40:02

有几个问题：

类名（和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";

来源

2010-07-28 01:52:08

它现在正在工作！但如果getElementsByClassName（）在IE中不可用，是否有另一种方法隐藏空td而不引用每一个？另外，如果td是空的，有没有办法隐藏整个tr？谢谢 – 2010-07-28 02:04:29

@新星：请看我更新的答案。 – 2010-07-28 02:13:33

感谢您的选择！ – 2010-07-28 02:28:40

如果你想通过类名来做到这一点，你可以这样做：

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

来源

2010-07-28 11:19:01

getElementsByClassName不工作

回答

相关问题