1. 首页
  2. 问答
  3. 隐藏HTML表列

隐藏HTML表列

2016-11-21 123 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

对不起，它是可见性：隐藏; –

相关问题

 相关问题