时间戳

首页 > 解决方案 > ajax成功后如何替换当前表

ajax - ajax成功后如何替换当前表

问题描述

我想在 ajax 调用成功后替换当前表并显示新表。

这是我现有的表：

<div class="container">
    <h2 class="well col-lg-4">Booking History</h2>

    <table id="tab" class="table table-bordered danger table-hover" style="color:orangered">
        <thead>
            <tr>
                <th>S.N</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Booking Date</th>
                <th>Booked On</th>
                <th>Vehile Number</th>
                <th>Parking Slot no.</th>

            </tr>
        </thead>
        <tbody>

            @{ int i = 1;}
            @foreach (var item in Model)
            {

                <tr>
                    <td>@i</td>
                    <td>@item.firstName</td>
                    <td>@item.lastName</td>
                    <td>@item.email</td>
                    <td>@DateTime.Parse(item.bookingDate).ToString("dd MMM yyyy")</td>
                    <td>@DateTime.Parse(item.bookedOn).ToString("dd MMM yyyy")</td>
                    <td>@item.vehicleNo</td>
                    <td>@item.parkingSlot_id</td>


                </tr>
                i++;
            }

        </tbody>
    </table>


        <div class="text-center">
            @Html.PagedListPager(Model, page => Url.Action("SearchBooking", new { page, fromDate = ViewBag.fromD,toDate= ViewBag.toD }))
        </div>

</div>

这是我的脚本：

<script>

    $(document).ready(function () {



        $('#searchByEmail').on('click', function () {

            var emailData = $('#emailValue').val();

            $.ajax({

                type: "POST",
                url: "/Admin/SearchByEmail",
                dataType: "JSON",
                data: { email: emailData },

                success: function (result) {
                    if (result != 0) {
                        JSON.stringify(result);


                        var tr;
                        tr = $('<tr/>');
                        tr.append("<th>First Name </th>");
                        tr.append("<th>Last Name </th>");
                        tr.append("<th>Email</th>");
                        tr.append("<th>License No.</th>");
                        tr.append("<th>Booking Date</th>");
                        tr.append("<th>Booked On</th>");
                        tr.append("<th>Vehicle No.</th>");
                        tr.append("<th>Parking Slot No.</th>");
                        $('table').append(tr);
                        for (var i in result) {
                            tr = $('<tr/>');
                            tr.append("<td>" + result[i].firstName + "</td>");
                            tr.append("<td>" + result[i].lastName + "</td>");
                            tr.append("<td>" + result[i].email + "</td>");
                            tr.append("<td>" + result[i].licenseNo + "</td>");
                            tr.append("<td>" + result[i].bookingDate.slice(0, -12) + "</td>");
                            tr.append("<td>" + result[i].bookedOn.slice(0, -12) + "</td>");
                            tr.append("<td>" + result[i].vehicleNo + "</td>");
                            tr.append("<td>" + result[i].parkingSlot_id + "</td>");

                            $('table').append(tr);

                        }

                    }
                },

                error: function () {
                    alert('failure');
                }

            })

            $('#emailValue').val('');

        })


    });

</script>

标签： ajax

解决方案

尝试这个

$("#tab").html('')在你之前使用append table

喜欢，

$("#tab").html('');
$("#tab").append(NewTable);

推荐阅读