HTML

Question

我假设toggle() show()和hide将元素转换为块元素，因此禁用了使用colspan的功能。当我没有隐藏TR时，colspan完美地工作。只要切换或显示隐藏，它就不再有效。

是否有一个jquery方法可以在维护表格单元格行时成功显示和隐藏表格行。

考虑到以下因素，我有点找到了解决方案。

HTML

<h3 class="tac"><?php echo 'Communications';?></h3>
<br/><br/>
<table class="projects-table-style deposit-table communication" cellpadding="0" cellspacing="0">
    <tr>
        <th>Date</th>
        <th>Consultant</th>
        <th>Country</th>
        <th>Rating</th>
        <th>Communications</th>
        <th>Last Bid</th>
        <th>Memorandum</th>
    </tr>
    <?php
    $i = 0;
foreach ($comments as $comment):
        $class = null;
        if ($i++ % 2 == 0) {
            $class = ' class="altrow"';
        }
    ?>
    <tr<?php echo $class;?>>
        <td>Date</td>
        <td>
            <?php echo $comment['User']['username']; ?>
        </td>
        <td><?php echo $comment['User']['Country']['name']; ?></td>
        <td>Rating</td>
        <td>
            x communcations
            <a href="#" class="reply-to">Reply</a>
        </td>
        <td>Last Bid</td>
        <td>Memorandum</td>
    </tr>
    <tr style="display:none" class="reply-box">
        <td style=" background: #fff" colspan="7">
            <table width="100%">
                <?php foreach($comment['Comment'] as $com): ?>
                <tr>
                    <td width="20%">
                        <?php echo $com['From']['username']; ?>
                    </td>
                    <td>
                        <?php echo $com['comment']; ?>
                    </td>
                    <td width="15%">
                        <?php echo $com['created']; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </table>
                 <?php echo $this->Form->create('Project');?>
                <?php echo $this->Form->input('message',array('type'=>'textarea','cols'=>'77','style'=>'margin-right:0px;padding:0px;'));?>
                <?php echo $this->Form->end(__('Submit', true,array('attribute'=>'value')));?>
        </td>
    </tr>
<?php endforeach; ?>
</table>

JS

$(document).ready(function() {
    $('.reply-to').click(function(){
        $(this).parent().parent().next().toggle('slow');
        return false;
    });
});

只要我切换附加到TR的.reply-box。嵌套在其中的TD元素将保持其表格单元格结构并仍将保留colspan属性。只是想知道是否有其他人知道更好的解决方案。

Answer 1

.show()的jQuery API说明了这一点：

这大致相当于调用.css（'display'，'block'），除了display属性恢复到最初的状态。如果元素的显示值为内联，则隐藏并显示，它将再次以内联方式显示。

但是，如果元素最初被隐藏（在CSS声明或内联样式中使用display: none），我不确定它将如何运作;虽然我无法让它在jsFiddle中突破，所以我认为它应该能正常运作。

colspan在jquery切换或show hide中不起作用

HTML

JS

1 个答案: