將多個值附加到 <table> 使用JavaScript

Question

我的MVC視圖中有一個表。

這是HTML代碼：

<table class="table" >
    @{int rowNo = 0;}
    <tr>
        <td data-toggle="modal" data-target="#newAppointment" style="height: 40px; width: 40px; background: red;">
            <img style="object-fit: cover;" src='@Url.Content("~/Images/plus.png")'/>
        </td>
    </tr>
    <tr style="background: white">
        <th></th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Date of birth
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Last Name
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            First Name
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Kasse
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Last visit
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Last edit
        </th>
        <th></th>
    </tr>
    <tbody id="patients">
        @foreach (var item in Model)
        {
            <tr>
                <td class="point">
                    @(rowNo += 1)
                </td>
                <td class="title">
                    @Html.DisplayFor(modelItem => item.Date_of_Birthday)
                </td>
                <td class="title">
                    @Html.DisplayFor(modelItem => item.Last_name)
                </td>
                <td class="title">
                    @Html.DisplayFor(modelItem => item.First_name)
                </td>
            </tr>
        }
    </tbody>
</table>

我也有一個AJAX腳本將值附加到表中：

<script>
    $('#search').click(function () {
       $("#patients").empty();
       var lname = $("#lname").val();

        var model = {
            LastName: lname
        };

        $.ajax({
            url: '@Url.Action("ResultOfSearch", "PatientDatabase")',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(model),
            type: 'POST',
            dataType: 'json',
            processData: false,
            success: function(data) {
                var list = data;
                //alert(list);
                var listnumber = 0;
                for (var i = 0; i <= list.length - 1; i++) {
                    var patientsList = ' <td class="point">' +
                        listnumber +
                        1 +
                        '</td>' +
                        '<td class="title"> ' +
                        list[i].dateOfBirthday +
                        '</td>' +
                        '<td class="title"> ' +
                        list[i].lastName +
                        '</td>' +
                        '<td class="title"> ' +
                        list[i].firstName +
                        '</td>';
                    $("#patients").append(patientsList);
                };
            }
        });
    });
</script>

它運作良好，但是當我有多個值時，它會附加在一行中。

如何正確附加？

Answer 1

附加tr

如下更改append代碼。

 $("#patients").append('<tr>'+patientsList+'</tr>');