我正在使用 php 创建此表:
<?php foreach ($jogos as $jogo) { ?>
<tr timeCasa="<?= $jogo->timeCasa; ?>" idCampeonato="<?= $jogo->id_campeonato; ?>" timeadversario="<?= $jogo->timeAdversario; ?>" data="<?= $jogo->data; ?>">
<td class="data"><?= $jogo->data; ?></td>
<td><?= $jogo->timeCasa; ?></td>
<td><?= $jogo->timeAdversario; ?></td>
<td><button class="btnAposta btn" tipo="<?= $jogo->timeCasa; ?>" data-selected="false" id="<?= $jogo->id; ?>"> <?= $jogo->valorCasa; ?></button></td>
<td><button class="btnAposta btn" tipo="Empate" data-selected="false" id="<?= $jogo->id; ?>"> <?= $jogo->valorEmpate; ?></button></td>
<td><button class="btnAposta btn" tipo="<?= $jogo->timeAdversario; ?>" data-selected="false" id="<?= $jogo->id; ?>"> <?= $jogo->valorFora; ?></button></td>
</tr>
<?php } ?>
但是当我尝试使用 javascript/css 删除一行时,会破坏 css: (我有按钮来显示一些行并删除一些行,这取决于 idCampeonato。 示例:我想显示 ID 为 1 的锦标赛,所以我获取 ID 并隐藏所有 ID 并显示所有 ID。
function mostrarCampeonatos(event) {
console.log(event.id);
var tbody = document.getElementById("tabela").childNodes[1].rows;
var tabelaT = $('tabela');
console.log(tbody);
for(var i=1;i<tbody.length;i++) {
//console.log(tbody[i].getAttribute("idcampeonato"));
console.log(tbody[i]);
if(event.id=="todos") {
//tbody[i].setAttribute("class", "showrow");
tbody[i].className = "showrow";
} else {
if (event.id != tbody[i].getAttribute("idcampeonato")) {
//tbody[i].setAttribute("class", "hiddenrow");
tbody[i].className = "hiddenrow";
} else {
//tbody[i].setAttribute("class", "showrow");
tbody[i].className = "showrow";
}
}
}
我的CSS:
最佳答案
您正在设置 <tr>
元素为 inline
通过 .showrow
类(class)。
用户@Xorifelse 已经为您提供了解决方案。只需删除此 css 代码:
.showrow {
display: inline;
}
或将其设置为:
.showrow {
display: table-row;
}
关于javascript - 使用 css 删除行后表格中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36113952/