Question

我已经使用jQuery的clone方法来克隆和追加一个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成功之前运行。请尝试上面提到的脚本。

为什么克隆不是在表内复制数据？

1 个答案: