我试图得到一个包含所有行和详细信息的表，但这些详细信息必须隐藏，直到我单击“父”行，这一切都正常，但我的详细信息表不适合整行的长度。
var expandirButton = document.getElementsByClassName("expandir");
for (var i = 0; i < expandirButton.length; i++) {
expandirButton[i].addEventListener("click", function() {
this.classList.toggle("active");
var tablaAnidada = this.nextElementSibling;
if (tablaAnidada.classList.contains("tabla-anidada")) {
if (tablaAnidada.style.display === "block") {
tablaAnidada.style.display = "none";
} else {
tablaAnidada.style.display = "block";
}
}
});
}table {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
}
th,
td {
text-align: left;
padding: 8px;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
/* Estilo para ocultar la tabla anidada */
.tabla-anidada {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabla anidada</title>
</head>
<body>
<h2>Tabla anidada</h2>
<table id="myTable">
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr class="expandir">
<td>John</td>
<td>Doe</td>
<td>23</td>
</tr>
<tr class="expandir">
<td>Mary</td>
<td>Moe</td>
<td>31</td>
</tr>
<!-- Fila que se expande -->
<tr class="expandir">
<td colspan="3">July</td>
</tr>
<!-- Nueva fila para la tabla anidada -->
<tr class="expandir tabla-anidada">
<!-- Agregue el atributo "colspan" a esta celda -->
<td colspan="3">
<table id="myNestedTable">
<tr>
<th>Ciudad</th>
<th>Pais</th>
</tr>
<tr>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>Paris</td>
<td>Francia</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>它应该工作，因为我做了测试与前一行，七月，它的作品.实际上，如果我擦除.tabla-anidada类从css，它显示了它应该的方式，没有隐藏功能明显.似乎这一切都发生时，javascript被添加.我已经尝试创建不同的css类为每个表，addinng宽度样式属性在不同的地方，等等，等等.
1条答案
按热度按时间ndasle7k1#
表并不总是很好地处理非表显示类型。我将您的
tablaAnidada.style.display = "block";更改为tablaAnidada.style.display = "table-row";，我认为这可能是您想要的结果。一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个