显示/隐藏Html TR/TD

如何从html表中显示/隐藏任何tr/td？我应该可以隐藏表格中显示的任何tr/td。显示/隐藏Html TR/TD

<table id="tableEditor" > 
    <tr> 
    <td>Country</td> 
    <td style="text-align:left;"> 
     <select name="select"> 
     <option value="value1">USA</option> 
     <option value="value2" >Sweden</option> 
     <option value="value3">Norway</option> 
     </select> 
    </td> 
    <td>Inventory ID</td> 
    <td style="text-align:left;">$123.23</td> 
    <td>Cost</td> 
    <td style="text-align:left;">$312.21</td> 
    <td>Description</td> 
    <td style="text-align:left;">this is a description</td> 
    </tr> 

</table>

CSS：

#tableEditor { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
    padding: 5px; 
    border: 1px solid #000; 
    background: #fff; 
} 

body, 
th, 
td { 
    font: normal 12pt Verdana; 
} 

table { 
    border-collapse: collapse; 
    margin: 1em 0 0 0; 
} 

th, 
td { 
    text-align: left; 
    border: 1px solid #ccc; 
    padding: 2px 5px 2px 2px; 
}

这是我JSFIDDLE

来源

2016-03-02 Nick Kahn

好吧，我做了，但为什么降票？谨慎解释 –

好吧我已经添加了CSS以及..我没有在第一个地方的原因是不要有太多的代码，我也不认为这将使我的CSS有任何区别，并没有任何影响，无论如何。 –

如果包括jQuery的，所有你需要做的是：

$("td:nth-of-type(3), td:nth-of-type(4)").hide();

这里有一个叉你的小提琴：https://jsfiddle.net/ccbsa9z3/2/

你也可以用CSS做同样的事情，尽管我假设你需要以编程的方式做到这一点。使用CSS，它的下面：

td:nth-of-type(3), td:nth-of-type(4) { 
    display: none; 
}

来源

2016-03-02 02:33:27 Sarhanis

你应该把列标题的thead元素，并在tbody内容：

<table id="tableEditor"> 
    <thead> 
     <tr> 
      <td>Country</td> 
      <td>Inventory ID</td> 
      <td>Cost</td> 
      <td>Description</td> 
     </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td style="text-align:left;"> 
      <select name="select"> 
       <option value="value1">USA</option> 
       <option value="value2" >Sweden</option> 
       <option value="value3">Norway</option> 
      </select> 
     </td> 

     <td style="text-align:left;">$123.23</td> 
     <td style="text-align:left;">$312.21</td> 
     <td style="text-align:left;">this is a description</td> 
    </tr> 
    </tbody> 
</table>

或者，您可以设置每个单元的display你想隐藏到none。

你可以看到这在行动here。

来源

2016-03-02 02:34:01 JCOC611

我有这样一个原因，我没有看到任何行动，它只是用不同的格式显示表格。 –

我只是建议你应该尝试修复格式，而不是黑客入侵它......如果可能的话。 – JCOC611

谢谢，但这不是黑客入侵 –

如果你想只用CSS来隐藏它，使用:nth-of-type()：

td:nth-of-type(2), 
td:nth-of-type(3) { 
    display: none; 
}

JSFiddle Demo

来源

2016-03-02 02:41:06

要隐藏JavaScript的元素，使用

element.style.visibility = "hidden";

要隐藏的CSS元素，使用

visibility: hidden;

要完全与CSS删除元素，使用

display: none;

updated your fiddle我隐藏使用每个这些方法的任意TD。

来源

2016-03-02 02:58:14 miln

DEMO

您可以使用.toggle()

说明：显示或隐藏匹配的元素。

$('#tableEditor tr').find('td:nth-child(3)').toggle();

$('#tableEditor tr').find('td:nth-child(4)').toggle();
您还可以添加一类显示器没有

$('#tableEditor tr').find('td:nth-child(3)').addClass('hidden');

$('#tableEditor tr').find('td:nth-child(4)').addClass('hidden');

来源

2016-03-02 02:59:29 guradio

显示/隐藏Html TR/TD

回答

相关问题