Почему клон не копирует данные внутри таблицы?

Question

Я использовал метод клонирования jQuery для клонирования и добавления html-таблицы. Строки и ячейки таблицы были добавлены через jQuery.

Я использовал клон, но он копирует только заголовки и CSS, а не добавленные данные.

Почему?

$('#tblInvoice').clone(true).appendTo('.table-responsive');

полный код:

  <script type="text/javascript">

        $(document).ready()
        {
            ShowInvoice();

            $('#tblInvoice').clone(true).appendTo('.table-responsive');
        }

        function ShowInvoice() {

            var url = '@Url.Action("PrintInvoice")';
            var data = { BookingID: "@ViewBag.BookingID" }

            $.get(url, data, function (response) {

                $("#tbodytblInvoice").html("");

                $.each(response.lstInvoicesData, function (i, val) {

                    $("#tblInvoice").append($('<tr>')
                     .append($('<td>').attr('id', "tdInvoiceNo" + i).html(val.InvoiceNo)).append($('<td>').attr('id', "tdCustomerName" + i).html(val.CustomerName))
                     .append($('<td>').attr('id', "tdServiceName" + i).html(val.ServiceName))
                     .append($('<td>').attr('id', "tdServicePrice" + i).html(val.ServicePrice)));

                    $('tfoot td#tdSum').text(val.TotalServiceCharges);

                });

            });

            //alert($('tfoot td#tdSum').text());


        };

        function PrintInvoice()
        {
            window.print();
        }

    </script>
}

таблица:

<table id="tblInvoice" class="table table-condensed tableBody">

                <thead>
                    <tr>

                        <th>Invoice No</th>
                        <th>Customer Name</th>
                        <th>Service Name</th>
                        <th>Service Price</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr style="background-color: lightskyblue ;">

                        <td></td>
                        <td></td>
                        <td style="font-weight: bold">Sum</td>
                        <td id="tdSum" style="font-weight: bold">2432</td>
                    </tr>

                </tfoot>
                <tbody id="tbodytblInvoice"></tbody>

            </table>

Answer 1

<script type="text/javascript">

        $(document).ready()
        {
            ShowInvoice();


        }

        function ShowInvoice() {

            var url = '@Url.Action("PrintInvoice")';
            var data = { BookingID: "@ViewBag.BookingID" }

            $.get(url, data, function (response) {

                $("#tbodytblInvoice").html("");

                $.each(response.lstInvoicesData, function (i, val) {

                    $("#tblInvoice").append($('<tr>')
                     .append($('<td>').attr('id', "tdInvoiceNo" + i).html(val.InvoiceNo)).append($('<td>').attr('id', "tdCustomerName" + i).html(val.CustomerName))
                     .append($('<td>').attr('id', "tdServiceName" + i).html(val.ServiceName))
                     .append($('<td>').attr('id', "tdServicePrice" + i).html(val.ServicePrice)));

                    $('tfoot td#tdSum').text(val.TotalServiceCharges);


                });
 $('#tblInvoice').clone(true).appendTo('.table-responsive');
            });

            //alert($('tfoot td#tdSum').text());


        };

        function PrintInvoice()
        {
            window.print();
        }

    </script>

Вы должны поставить свою логику двоеточия в успех AJAX. В вашем случае клон будет работать до успеха AJAX. Пожалуйста, попробуйте вышеупомянутый скрипт.