jquery - 在现有表中插入行

Question

我在将内容插入现有表格时遇到问题。除了插入，一切正常。插入点是 thead 元素下方和 php for 循环上方的一个跨度，该循环生成图中所示的表格行。要插入的内容已正确嵌入表格行和表格数据中。甚至可以在创建表后动态插入行吗？

编辑:

            <table class="table table-hover" id="revolver">
                    <thead>
                        <td id="profile-message-indicator"></td>
                        <td id="profile-message-space">Message</td>
                        <td id="profile-message-name-space">To</td>
                        <td>Date/Time</td>
                    </thead>

                    <span id="insert-sent-message">


                    </span>

                    <?php if(isset($message_list[1][0]['message_state'])){?>

                    <?php for($i = 0; $i < $array_length_send; $i++){ ?>

                    <tr>

                        <?php if(strlen($message_list[1][$i]['message']) >= 54){?>

                            <td id="profile-message-indicator">

                                <a href="" class="extend-message" data-messageid="<?php echo $message_list[1][$i]['message_id']; ?>"><strong class="profile-extend-message">+</strong></a>

                            </td>

                            <td class="table-data-string">

                            <span id="substring-message<?php echo $message_list[1][$i]['message_id']; ?>">

                                <p class="comments-layout"><?php echo substr($message_list[1][$i]['message'], 0, 54); ?>...</p>


                            </span>

                        <?php } else { ?>

                            <td></td>

                            <td class="table-data-string">

                            <span id="substring-message<?php echo $message_list[1][$i]['message_id']; ?>">

                                <p class="comments-layout"><?php echo $message_list[1][$i]['message']; ?></p>

                            </span>

                        <?php }?>

                            <span class="complete-message" id="complete-message<?php echo $message_list[1][$i]['message_id']; ?>">

                                <p class="comments-layout"><?php echo $message_list[1][$i]['message']; ?></p>

                            </span>

                        </td>

                        <td>

                            <a href="" class="goto-author" data-author="<?php echo $message_list[1][$i]['author']; ?>"><?php echo $message_list[1][$i]['recip']; ?></a>

                        </td>

                        <td>

                            <p><?php echo date("Y-m-d H:i", strtotime($message_list[1][$i]['message_timestamp'])); ?></p>

                        </td>

                    </tr>

                    <?php }} else {?>

                        <!-- EMPTY NO MESSAGES -->

                    <?php  }?>
                </table>

正在插入的 HTML 模板:

<tr>

<?php if(strlen($reply) >= 54){ ?>

    <td id="profile-message-indicator">

        <a href="" class="extend-message" data-messageid="<?php echo $message_id[0]?>"><strong class="profile-extend-message">+</strong></a>

    </td>

    <td class="table-data-string">

        <span id="substring-message<?php echo $message_id[0]; ?>">

            <p class="comments-layout"><?php echo substr($reply, 0, 54); ?>...</p>

        </span>

<?php } else { ?>

    <td>
    </td>

    <td class="table-data-string">

        <span id="substring-message<?php echo $message_id[0]; ?>">

            <p class="comments-layout"><?php echo $reply;?></p>


        </span>
<?php }?>

    <span class="complete-message-reply" id="complete-message<?php echo $message_id[0]; ?>">

        <p class="comments-layout"><?php echo $reply;?></p>

    </span>

</td>

<td>

    <a href="" class="goto-author" data-author="<?php echo $recipient; ?>"><?php echo $recipient; ?></a>

</td>

<td>
    <?php echo $today; ?>
</td>
</tr>

JS:

    $(document).on('click','.submit-message-reply',function(e){
    e.preventDefault();
    var messageid = $(this).data('messageid');
    var reply = $('#message-reply-container'+messageid).val();
    var recipient = $(this).data('recipient');
    $.ajax({
        type: 'POST',
        url: '?a=profile_message_reply',
        data: {
            "messageid" : messageid,
            "reply" : reply,
            "recipient" : recipient
        },
        success: function(data){
            $('#message-reply-container'+messageid).val("");
            $('#insert-sent-message').append(data);
        }
    });
});

Answer 1

去掉表行之间的 span，它会使您的 html 无效。出于同样的原因，也用 tr 将 thead 中的表格单元格包裹起来。

然后在表格标题行上使用 .after() 而不是在跨度上使用 .append()。

$('#revolver tr:first').after(data);​

查看此 FIDDLE .