Question

我的表格是用ajax生成的。单击其中一行后，我想打破此表并在此间隙中插入一些内容（将来的另一个表）。但它并没有打破我的ajax。

但是使用相同的html并且没有ajax它可以正常工作。

我的HTML代码：

<div class="table-responsive">
<table class="table table-hover">
    <thead>
        <tr>
            <th>Date</th>
            <th>D. Bef.</th>
            <th>D. Aft.</th>
            <th>Note</th>
            <th>Addr.</th>
            <th></th>
        </tr>
    </thead>
    <tbody class="client-orders">
        <?php foreach ($orders as $order) : ?>
            <tr id="order-row-<?=$order['order_id']?>">
                <td>
                    <input  id="data-<?=$order['order_id']?>">
                </td>
                <td contenteditable="true"><?=$order['debt_payment']?></td>
                <td contenteditable="true"><?=$order['debt_current']?></td>
                <td contenteditable="true"><?=$order['order_note']?></td>
                <td contenteditable="true"><?=$order['address_id']?></td>
                <td>
                    <button type="button" class="btn btn-outline btn-danger"></button>
                    <button type="button" class="btn btn-outline btn-info btn-show-details"
                            id="details-btn-<?=$order['order_id']?>"
                            order-id="<?=$order['order_id']?>">details
                    </button>
                </td>
            </tr>


            <!--BREAK PUT HERE-->


    <?php endforeach ?>
    </tbody>
</table>

和javascript：

    // this ajax shows previous html content (just for case)
    $.ajax({
    url: 'Views/ajax_php/orders.php',
    method: 'post',
    data: {clientId: clientId},
    success: function (data) {
        $('#orders').after(data);
    }
});

var orderId;
$(document).one('ajaxStop', function () {
    $('.btn-show-details').on('click', function () {
        orderId = $(this).attr('order-id');
        // here I insert closing tag, put <p> and open table again
        $('\
        </tbody>\n\
    </table>\n\
</div>\n\
<p> text row row row row row row row row row row row row </p>\n\
<div class="table-responsive">\n\
    <table class="table table-hover">\n\
        <thead>\n\
            <tr>\n\
                <th>Date</th>\n\
                <th>D. Bef.</th>\n\
                <th>D. Aft.</th>\n\
                <th>Note</th>\n\
                <th>Addr.</th>\n\
                <th></th>\n\
            </tr>\n\
        </thead>').insertAfter($('#order-row-' + orderId));

Answer 1

这可能会起作用：

     $.ajax({
    url: 'Views/ajax_php/orders.php',
    method: 'post',
    data: {clientId: clientId},
    success: function (data) {
        $('#orders').after(data);
    }
});

var orderId;
$(document).one('ajaxStop', function () {
    $('.btn-show-details').on('click', function () {
        orderId = $(this).attr('order-id');
        // here I insert closing tag, put <p> and open table again
        $('\
       <p> text row row row row row row row row row row row row </p>\n\
      <thead>\n\
            <tr>\n\
                <th>Date</th>\n\
                <th>D. Bef.</th>\n\
                <th>D. Aft.</th>\n\
                <th>Note</th>\n\
                <th>Addr.</th>\n\
                <th></th>\n\
            </tr>\n\
        </thead>').insertAfter($('#order-row-' + orderId));

您应首先打破该列和行，然后打破整个表。

用jquery点击ajax生成的表

1 个答案: