Question

I’m having problem inserting content into already existing table. Everything works fine excepts the insertion. The insertion point is a span beneath the thead element and above the php for loop that generates the table rows seen in the picure. The content that is to be inserted is properly embedded inside a table row and table data’s. Is it even possible to insert rows dynamically after the table is created?

edit:

            <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 template being inserted:

<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

Get rid of the span in between table rows, it makes your html invalid. Also wrap table cells in thead with tr for the same reason.

Then use .after() on table header row instead of .append() on the span.

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

See this FIDDLE.