Question

我有一个包含[很多]隐藏行和一些jQuery / css的表来隐藏/显示基于点击的行。我大部分工作，点击一行，隐藏的一个被揭示，再次点击，它被隐藏。

问题在于，当单击一行时，显示的行将前一[可点击]行的所有内容推向右侧，就像第二行仅占用第一个单元格一样[它不是' t - 见下文]。

如果我删除这些类来隐藏隐藏的行，那么整个表格显示得很好，根本没有格式问题;

导致此问题的原因以及如何解决？

这是html：

<tr class="clickable" id="67">
    <td align="left">Visible row</td>
    <td align="right">$150,000.00</td>
    <td align="right">$150,000.00</td>
    <td align="right">$9,000.00</td>
    <td align="right">$0.00</td>
</tr>

<tr class="collapse out contracts" id="67collapsed">
    <td align="left">Hidden row</td>
    <td align="right">$150,000.00</td>
    <td align="right">$150,000.00</td>
    <td align="right">$9,000.00</td>
    <td align="right">$0.00</td>
</tr>

和脚本：

<script>
$(".clickable").click(function() {

var id = $(this).attr('id');
var target = '#'+id+'collapsed';

if($(target).hasClass("out")) {
        $(target).addClass("in");
        $(target).removeClass("out");
    } else {
        $(target).addClass("out");
        $(target).removeClass("in");
    }
});
</script>

如何防止显示的行打破表格格式？

0 个答案: