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);
        }
    });
});

score 1 · Accepted Answer

spanテーブルの行の間を削除すると、HTMLが無効になります。また、同じ理由でテーブルセルをでラップtheadします。tr

次に、スパンでは.after()なくテーブルヘッダー行で使用します。.append()

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

このFIDDLEを参照してください。

score 1 · Accepted Answer

何かのようなもの

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

score 1 · Accepted Answer

最初の質問への答えはイエスです。テーブルが挿入された後、テーブルに行を挿入することは可能です。

あなたはそれを行うことができます

$.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 することだけです。

jquery - 既存のテーブルに行を挿入

3 に答える 3

Related

Reference