使用CSS或JavaScript隐藏表格中的特定行

问题描述：

我有一个HTML表格的轮廓，并且我通过在线数据集中的javascript插入数据。 Cell 0是第一个包含信息的列。该列中的某些行的名称将显示在cell 0中，其中一些将在cell 0中显示短划线（ - ）。我在我的javascript中为cell0设置了一个班级至hide-dash。我如何使用CSS或JavaScript来隐藏所有表格行cell0等于破折号（ - ）？使用CSS或JavaScript隐藏表格中的特定行

JSFiddle示例，以更好地了解我需要什么。我需要的破折号排隐患： https://jsfiddle.net/k8jr16j6/

HTML表：

<table class="table table-borderless" id="top25"> 
    <tbody> 
    <tr> 
     <th>Customer</th> 
     <th>Sales</th> 
     <th>MGN $</th> 
     <th>MGN %</th> 
    </tr> 
    </tbody> 
</table>

的JavaScript：

var customerTable = document.getElementById("top25"); 
var tableRow = customerTable.insertRow(); 
     var cell0 = tableRow.insertCell(0); 
     cell0.style.textAlign = "left"; 
     cell0.innerHTML = row['account filter']; 
     cell0.className='hide-dash'; 

     var cell1 = tableRow.insertCell(1); 
     cell1.innerHTML = row['sales']; 

     var cell2 = tableRow.insertCell(2); 
     cell2.innerHTML = row['margin dollar']; 

     var cell3 = tableRow.insertCell(3); 
     cell3.innerHTML = row['margin percent'];

请片段或的jsfiddle的看到它 –

如果你想隐藏那么为什么你不在该行上设置该类？现在你正在将它设置在单元格上... – CBroe

@CyrilBeeckman我添加了一个jsfiddle示例，其中显示了我的表格的样子 – Rataiczak24

答

var customerTable = document.getElementById("top25"); 
    var tableRow = customerTable.insertRow(); 
     var cell0 = tableRow.insertCell(0); 
     cell0.style.textAlign = "left"; 
     cell0.innerHTML = row['account filter']; 
     cell0.className='hide-dash'; 
     if (row['account filter'] == "-") tableRow.style.display="none"; 

     var cell1 = tableRow.insertCell(1); 
     cell1.innerHTML = row['sales']; 

     var cell2 = tableRow.insertCell(2); 
     cell2.innerHTML = row['margin dollar']; 

     var cell3 = tableRow.insertCell(3); 
     cell3.innerHTML = row['margin percent'];

这是完美的！感谢您的帮助！ – Rataiczak24

不客气。一个快速修复的位，但做的工作。不知道你需要'td'（cell）className。 – yezzz

答

如果你给出的类细胞：hide-dash您可以用CSS改变的可视性：

hide-dash { 
    visibility: hidden; 
}

如果我想隐藏该列中的所有行，这将工作...但是，我只需要隐藏行等于破折号的行 – Rataiczak24

另外，这会隐藏'td'，而不是'tr' – yezzz

答

您必须设置显示整个行都没有。因此，将类'hide-dash'添加到您创建的行中。（ '隐藏仪表板'）。

.hide-dash { 
    display: none; 
} 


<table> 
    <tr class='hide-dash'> 
    <td>foo</td> 
    <td>bar</td> 
    </tr> 
    <tr> 
    <td>foo</td> 
    <td>bar</td> 

    </tr> 
</table>

https://jsfiddle.net/fhrpv81a/1/

更新：

使用jQuery你可以做到这一点

$父（）隐藏（）;

这不会起作用，因为我的HTML中只有表格模板...实际的表格行是通过插入数据创建的在我的javascript文件 – Rataiczak24

如果你可以使用jQuery试试这个。 https://jsfiddle.net/fhrpv81a/4/ – AndyB

我不能在我的HTML中实际添加hide-dash类，因为我只能放置表格标题，而且我不希望该类影响标题。我很确定它需要通过JavaScript以某种方式完成 – Rataiczak24

答

你可以得到一个包含电池一类隐藏仪表板所有行，并隐藏他们：

var columsHide = customerTable.getElementsByClassName('hide-dash'); 
Array.prototype.forEach.call(columsHide, function(el) { 
      el.parentElement.style.display = "none"; 
});

使用CSS或JavaScript隐藏表格中的特定行

相关推荐