javascript - 使用 css 删除行后表格中断

Question

我正在使用 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:

应用 css 删除行后的表格: 是删除一行的最佳方法吗？

Answer 1

您正在设置 <tr>元素为 inline通过 .showrow类(class)。

用户@Xorifelse 已经为您提供了解决方案。只需删除此 css 代码:


.showrow {
display: inline;
}


或将其设置为:


.showrow {
display: table-row;
}