在现有表中插入行

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

类似

$("#revolver").append("<tr><td class='table-data-string'>"+val+"</td></tr>");

Answer 2

删除表格行之间的span，这会使您的HTML无效。同样将thead中的表格单元格与tr包装起来也是出于同样的原因。

然后在表标题行上使用.after()而不是.append()。{/ p>

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

请参阅此FIDDLE。

Answer 3

您的第一个问题的答案是肯定的 - 在插入表格后，可以在表格中插入行。

你可以通过

来做到这一点

$.ajax({
    type: 'POST',
    url: '?a=profile_message_reply',
    data: {
        "messageid" : messageid,
        "reply" : reply,
        "recipient" : recipient
    },
    success: function(data){
        var new_row = document.createElement("tr");

        var new_tds = {
            td_indicator: document.createElement("td"),
            td_space: document.createElement("td"),
            td_name_space: document.createElement("td"),
            td_date: document.createElement("td")
        };

        new_tds.td_indicator.addAttribute("class", "profile-message-indicator");
        new_tds.td_space.addAttribute("class", "profile-message-space");
        new_tds.td_name_space.addAttribute("class", "profile-message-name-space");
        new_tds.td_date.addAttribute("class", "profile-message-date");

        var td_texts = {
            td_indicator: document.createTextNode(response.indicator),
            td_space: document.createTextNode(response.space),
            td_name_space: document.createTextNode(response.name_space),
            td_date: document.createTextNode(response.date)
        };

        $.each(new_tds, function(key, value) {
            new_tds[key].appendChild(td_texts[key]);
            new_row.appendChild(new_tds[key]);
        });

        $("table#revolver").append(new_row);
    },
    dataType: "json"
});

在服务器端你需要做的就是对数据数组进行json_encode。