logo标签列表

隐藏HTML表格列

htmlcss
3
我有一个包含项目和日期的HTML表格。第一列是项目每日使用量，第二列是该项目的入库数量，第三列是该项目每日存货量。我的目标是自动隐藏前两列，并通过jquery鼠标悬停时再次显示。 我的想法是为每一行添加一个类，并将前两行设置为隐藏，在jquery鼠标悬停时，我将执行.removeClass操作, 以便在突出显示项目行时，所有3行都会被显示。
我的问题是：我试过使用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>

你到底想隐藏什么？display:none在<td>元素上完全有效。 - Scott Marcus
我相信他的意思是colspan的值不会随着隐藏的<td>改变。当两个td被隐藏时，它应该从3更改为1。 - Roger Ng
我将隐藏每个项目下的前两列。是的，col span也将被删除。我为tds添加了一个类，但当我在css文件中使用display:hidden;来针对这些类时，由于某种原因它不起作用。 - Brandon
可能是使用jQuery隐藏表格的列/单元格的重复问题。 - Roger Ng
罗杰，那不是我想要的。在代码片段示例中，我想要隐藏的是第2列和第3列、第5列和第6列、第8列和第9列。 - Brandon
3个回答
2
您可以使用以下方式隐藏子元素。给主表格一个#ID。这代表要隐藏的2个元素。
#tableID td:nth-child(-n+2) {
    display: none;
}

这里有一个示例供您参考。在此情况下，更改了文本颜色...但对于您的情况，我建议使用visibility:hidden而不是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>

这个答案让我很感兴趣！我仍在努力理解如何使用nth-child。由于有许多不同的行被隐藏，而且我只想根据鼠标悬停事件一次性取消隐藏2行，那么我能否使用nth-child和jquery $(this)来取消隐藏刚好在鼠标悬停的行之前隐藏的2行？FYI总行数没有限制，唯一的模式是有2行隐藏，然后1行未隐藏。当鼠标悬停在未隐藏的行上时，应该显示隐藏的行。这个模式无限重复。 - Brandon
@Brandon，你最终搞定了吗？我可以帮你创建实际的表格..让我知道，干杯。 - norcal johnny
1
在这个示例中，这个 td class 被隐藏了。
<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>

审查您的代码

1
如果您只想隐藏表格，但保留原有的间距，则可以使用以下代码：
visibility: hidden;

否则，
display:none;

是正确的方式。

display: hidden; 真的吗？ - Abhishek Pandey
抱歉，它的可见性为hidden。 - Eli Kerrison-Male
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接