顯示/隱藏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

回答

相關問題