用javascript隐藏表格单元格

Question

我想知道是否有人可以帮助我根据某些标准隐藏表格单元格。我希望interogate table cell（td）标签内的每个元素，并且只有当嵌套的每个元素都没有“display：none;”样式时才隐藏父节点（td）。我目前正在使用javascript来执行此操作，但它隐藏了（td）一次出现“display：none;”所以只要其中的每个元素都没有“style：display：none;”别管它，否则隐藏它。希望这是有道理的。

感谢。

<script language="JavaScript" type="text/javascript">
    var links = document.body.getElementsByTagName("a");
    for(i=0; i<links.length; i++)
    {
        if(links[i].outerHTML.indexOf("BaseType") != -1 && 
          links[i].parentNode.parentNode.parentNode.parentNode.className == "level-section")
        {
           links[i].parentNode.parentNode.parentNode.parentNode.style.display = "none";
           links[i].parentNode.parentNode.parentNode.parentNode.parentNode.style.display = "none";
        }
   }
   </script>

Answer 1

我认为你正在寻找这样的东西：

$('#tableId').find('td').each(function(){
    var noHide = 0; 
    $(this).children().each(function(){
        if ($(this).css('display') != 'none'){
            noHide++;       
        }
    })

    if (noHide != 0) {
        $(this).css('visibility','hidden');
    }

})

实际上将隐藏在单元格中的可见性设置为更好。

Answer 2

$.each($('#column'),function(){
   if($('div:visible',this).length == 0)
      $(this).hide();
   else
      $(this).show();
});

这样可行，但您的代码不正确。元素的ID应该是唯一的，请在上面的代码中使用类：<td class="column" />和$('.column')而不是$('#column')。

Answer 3

我不确定你是否想要使用jQuery。因为已经有一些jQuery答案已经存在，这是一个纯JavaScript解决方案：

jsfiddle

的Javascript

var data = document.querySelectorAll('td');

Array.prototype.forEach.call(data, function(td){

    var hide = Array.prototype.some.call(td.children, function(div){
        return div.style.display == "none";
    });

    if (hide) {
        td.style.display = "none";
    }
});