我有一个包含项目和日期的HTML表格。我们的想法是,该项目的第一列将是该项目的每日使用量,第二列将是该项目的下载货物,第三列将是该项目的每日库存。我的目标是自动隐藏前两列,然后通过jquery鼠标悬停再次查看它们。我的想法是为每一行添加一个类并将前两行设置为隐藏,然后在jquery mouseover上我将.removeClass,这样当项目行突出显示时,将显示所有3行。
我的问题是:我尝试过使用CSS display:none;但似乎不适用于html表td元素?我可以使用任何其他CSS命令,还是我必须采用不同的方式?
下面是一个试图使用的表的示例。
let backgroundTileDefinition = backgroundTileDefinition(key: "Tile1")

table,th, td {
border: 1px solid black;
border-collapse: collapse;
}

答案 0 :(得分: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>
答案 1 :(得分: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>
查看您的代码
答案 2 :(得分:1)
如果你只想隐藏你的桌子,但保持你的间距,那么使用:
visibility: hidden;
否则,
display:none;
是要走的路。