javascript - 用javascript隐藏表格单元格

Question

我想知道是否有人可以根据某些标准帮助我隐藏表格单元格。我想询问表格单元格 (td) 标记内的每个元素并隐藏父节点 (td)，前提是嵌套的每个元素都没有“display:none;”样式 我目前正在使用 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 应该是唯一的，使用 class 代替：<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";
    }
});