Javascript getElementsByClassName不工作_Javascript_Webforms_Html Table_Dynamic Data

Javascript getElementsByClassName不工作

javascript

Javascript getElementsByClassName不工作,javascript,webforms,html-table,dynamic-data,Javascript,Webforms,Html Table,Dynamic Data,我编写了一个php页面，将mysql数据库中的信息整齐地显示在表中。我想用onLoad事件处理程序隐藏空表行下面是一个示例表，其中的代码在没有内容时隐藏了。但我只能让它使用不同的ID： <script type="text/javascript"> function hideTd(id){ if(document.getElementById(id).textContent == ''){ docu

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

下面是一个示例表，其中的代码在没有内容时隐藏了

。但我只能让它使用不同的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>


函数hideTd（id）{
if（document.getElementById（id.textContent=''）{
document.getElementById（id）.style.display='none'；
}
}
不空

我想做的是为

使用一个类来实现同样的目标，同时只引用该类一次，而不引用我要删除的每个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>


函数hideTd（）{
if（document.getElementsByClassName（）.textContent==“”）{
document.getElementsByClassName（）.style.display='none'；
}
}
不空

但它不起作用。它应该隐藏具有指定类的空

s。如何使用类而不是ID隐藏空的

s？

有几个问题：

类名（和ID）为

必须将类传递给

GetElementsByCassName（）

您必须对结果集进行迭代

示例（未测试）：

获取所有

td

元素

要隐藏父行，请使用元素的

parentNode

属性：

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

如果要按类名执行，可以执行以下操作：

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


函数hideTd（类名称）{
var元素；
if（document.getElementsByClassName）
{
elements=document.getElementsByClassName（className）；
}
其他的
{
var elArray=[]；
var tmp=document.getElementsByTagName（元素）；
var regex=new RegExp（“（^ |\\s）”+className+”（\\s |$）”；
对于（变量i=0；i

它正在工作！但是如果GetElementsByCassName（）在IE中不可用，是否有其他方法可以隐藏空td而不引用每个td？此外，如果td为空，是否有办法隐藏整个tr？Thanks@newstar：请查看我更新的答案。更新：getElementsByClassName（）在IE9中工作。我发布了一个答案，其中包含一个函数，如果getElementsByClassName不存在，该函数可以作为备用函数

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

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