1. 首頁
  2. 問答
  3. 隱藏HTML表列

隱藏HTML表列

2016-11-21 170 views
3

我有一個HTML表格，其中包含項目和天。這個想法是，物品的第一列將是物品的每日使用量，第二列將是該物品的包裝運輸量，第三列將是該物品的每日庫存量。我的目標是自動隱藏前2列，然後通過jquery鼠標懸停再次使其可見。我的想法是爲每行添加一個類，並將前兩行設置爲隱藏，然後在jQuery的鼠標懸停上，然後選擇.removeClass，這樣當項目行突出顯示時，所有3行都會顯示出來。隱藏HTML表列

我的問題是：我試過使用CSS display：none;但似乎不工作的HTML表td元素？是否有任何其他的CSS命令我可以使用，或者我必須採取不同的方式？

繼承人一個表格的例子，即時通訊嘗試使用。

table,th, td { 
 
    
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
     
 
}
<table> 
 
    <tr> 
 
    <th>Item #</th> 
 
    <th colspan='3'>100017</th> 
 
    <th colspan='3'>100018</th> 
 
    <th colspan='3'>100019</th> 
 
    <th colspan='3'>100020</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Component</th> 
 
    <th colspan='3'><u>chips</u></th> 
 
    <th colspan='3'><u>butterfingers</u></th> 
 
    <th colspan='3'><u>Flat Pretzels</u></th> 
 
    <th colspan='3'><u>Milk Chocolate</u></th> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-03</th> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-04</th> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-05</th> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-06</th> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-07</th> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
</table>

來源

2016-11-21 Brandon

+0

你究竟想要隱藏什麼？ 'display：none'在'​​'元素上工作得很好。 –

+0

我相信他的意思是「colspan」的價值不會隨着隱藏的「​​」而改變。當兩個「td」被隱藏時，它應該從'3'變爲'1'。 –

+0

我會隱藏每個項目下的前2列。是的，跨度也將被刪除。我向tds添加了一個類，但是當我使用display時：hidden;在這些類的CSS文件，它不工作由於某種原因 – Brandon

回答

2

您可以隱藏使用像這樣的孩子。給主表一個#ID。 這代表2被隱藏

#tableID td:nth-child(-n+2) { 
    display: none; 
}

以下是您的示例。在這種情況下，改變了文本顏色..但對於你的情況，我會使用可見性：隱藏與顯示：無關，因爲這將保持單元格間距不變。

你可以看到我已經註釋了它應該在哪裏使用。

$("td:nth-child(4)").hover(function() { 
 
    $(this).siblings("td:nth-child(-n+3)").addClass("fook"); 
 
}, function() { 
 
    $(this).siblings("td:nth-child(-n+3)").removeClass("fook"); 
 
}); 
 
    
 
    $("td:nth-child(7)").hover(function() { 
 
    $(this).siblings("td:nth-child(5n),td:nth-child(7n-1)").addClass("fook"); 
 
}, function() { 
 
    $(this).siblings("td:nth-child(5n),td:nth-child(7n-1)").removeClass("fook"); 
 
}); 
 
    
 
    $("td:nth-child(10)").hover(function() { 
 
    $(this).siblings("td:nth-child(8n),td:nth-child(10n-1)").addClass("fook"); 
 
}, function() { 
 
    $(this).siblings("td:nth-child(8n),td:nth-child(10n-1)").removeClass("fook"); 
 
}); 
 
    
 
    $("td:nth-child(13)").hover(function() { 
 
    $(this).siblings("td:nth-last-child(-n+3)").addClass("fook"); 
 
}, function() { 
 
    $(this).siblings("td:nth-last-child(-n+3)").removeClass("fook"); 
 
});
* { 
 
    text-align: center 
 
} 
 
td:nth-child(3n+0),td:nth-child(3n-1){ 
 
    background: pink; 
 
    color: pink; 
 
    /* visibility: hidden; */ 
 
} 
 
td:nth-child(3n+1){ 
 
    background: white; 
 
    cursor: pointer; 
 
    color: black !important; 
 
} 
 
.fook { 
 
    color: yellow !important; 
 
    /* visibility: visible !important; */ 
 
} 
 
#mytable { 
 
    width: 100% 
 
} 
 
#mytable th:nth-child(-n+1) { 
 
    background: lightgray; 
 
} 
 
#mytable th:nth-child(+1n+2) { 
 
    background: lightcoral; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
    <tr> 
 
    <th>Item #</th> 
 
    <th colspan='3'>100017</th> 
 
    <th colspan='3'>100018</th> 
 
    <th colspan='3'>100019</th> 
 
    <th colspan='3'>100020</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Component</th> 
 
    <th colspan='3'><u>chips</u></th> 
 
    <th colspan='3'><u>butterfingers</u></th> 
 
    <th colspan='3'><u>Flat Pretzels</u></th> 
 
    <th colspan='3'><u>Milk Chocolate</u></th> 
 
    </tr> 
 
    <tr class="first"> 
 
    <th>2016-01-03</th> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr class="second"> 
 
    <th>2016-01-04</th> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr class="first"> 
 
    <th>2016-01-05</th> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr class="fourth"> 
 
    <th>2016-01-06</th> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr class="fifth"> 
 
    <th>2016-01-07</th> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    <td class='dailyusagetable'>0</td> 
 
    <td class='incommingtable'>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
</table>

來源

2016-11-21 03:16:11

+0

此答案感興趣我！我仍在努力理解使用第n個孩子。由於有許多不同的行被隱藏，我只想取決於mousover事件一次取消隱藏2個特定的行，我可以使用帶有jquery $（this）的nth-child來取消隱藏在行之前的2行這是被蒙上了陰影？僅供參考，總共可能存在的行數沒有限制，唯一的模式是有兩個隱藏行，然後是一個未隱藏行。當未隱藏的行是鼠標懸停時，隱藏的行應該出現。這種模式無限重複 – Brandon

+0

@Brandon你有沒有這樣做？我可以幫助創建你的實際桌子。讓我知道，歡呼。 –

1

在此示例中，該TD類是隱藏

<html> 
    <head> 

     <style> 
      .dailyusagetable, .incommingtable { 
       display:none; 
      } 
     </style> 
    </head> 
    <body> 

     <table> 
      <tr> 
       <th>Item #</th> 
       <th colspan='3'>100017</th> 
       <th colspan='3'>100018</th> 
       <th colspan='3'>100019</th> 
       <th colspan='3'>100020</th> 
      </tr> 
      <tr> 
       <th>Component</th> 
       <th colspan='3'><u>chips</u></th> 
       <th colspan='3'><u>butterfingers</u></th> 
       <th colspan='3'><u>Flat Pretzels</u></th> 
       <th colspan='3'><u>Milk Chocolate</u></th> 
      </tr> 
      <tr> 
       <th>2016-01-03</th> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
      </tr> 
      <tr> 
       <th>2016-01-04</th> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
      </tr> 
      <tr> 
       <th>2016-01-05</th> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
      </tr> 
      <tr> 
       <th>2016-01-06</th> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
      </tr> 
      <tr> 
       <th>2016-01-07</th> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
       <td class='dailyusagetable'>0</td> 
       <td class='incommingtable'>0</td> 
       <td>0</td> 
      </tr> 
     </table> 

    </body> 


</html>

檢查代碼

來源

2016-11-21 03:20:24

2

如果你只是想你的表被隱藏，但你要間隔然後使用：

visibility: hidden;

否則，

display:none;

是要走的路。

來源

2016-11-21 03:24:35

+0

'display：hidden;'真的嗎？ –

+0

對不起，它是可見性：隱藏; –

相關問題

 相關問題