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。

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

.showrow { display: inline; }

或将其设置为：

.showrow { display: table-row; }

使用css删除行后表断开

1 个答案: