2

在此处输入图像描述

我在将内容插入现有表格时遇到问题。除插入外，一切正常。插入点是 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);
        }
    });
});
4

3 回答 3

1

就像是

$("#revolver").append("<tr><td class='table-data-string'>"+val+"</td></tr>");
于 2012-10-26T13:41:34.287 回答
1

摆脱span表格行之间的中间，它会使您的 html 无效。出于同样的原因，也thead用 with包裹表格单元格。tr

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

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

看到这个FIDDLE。

于 2012-10-26T13:42:32.507 回答
1

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

你可以这样做

$.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。

于 2012-10-26T13:49:56.130 回答