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不工作

回答

相關問題