Jquery / Html table 仅显示最后一行

Question

我有一个 jQuery / Html table 并且在这个 table 中只显示最后一条记录。如果我有 2 个项目但仍然只显示最后一行。

    <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
                            <div class="form-group">
                                NEWSID
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <div class="form-group">
                               Description
                            </div>
                        </div>


                    <div class="row" id="resultTbl">

                </div>
        </div>


 $.ajax({
    url: $("#getNewsDetails").val(),
    type: "POST",
    data: { NewsId: $("#NewsId").val() },
    dataType: "json",
    success: function (_result) {

        $.each(_result.NewsDetails, function (index, value) {

            let trHTML = '';

            trHTML += '<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">';
            trHTML += '<div class="form-group">';
            trHTML += '<td>' + value.Id+ '</td>';
            trHTML += '</div>';
            trHTML += '</div>';

            trHTML += '<div class="col-lg-3 col-md-2 col-sm-12 col-xs-12">';
            trHTML += '<div class="form-group">';
            trHTML += '<td>' + value.Description + '</td>';
            trHTML += '</div>';
            trHTML += '</div>';

            $('#resultTbl').html(trHTML);
        });

    },
    error: function (jqXHR) {

    }
});

Answer 1

更新您的 jquery 代码。每次循环完成后需要设置html代码

$.ajax({
    url: $("#getNewsDetails").val(),
    type: "POST",
    data: { NewsId: $("#NewsId").val() },
    dataType: "json",
    success: function (_result) {

        $.each(_result.NewsDetails, function (index, value) {

            let trHTML = '';

            trHTML += '<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">';
            trHTML += '<div class="form-group">';
            trHTML += '<td>' + value.Id+ '</td>';
            trHTML += '</div>';
            trHTML += '</div>';

            trHTML += '<div class="col-lg-3 col-md-2 col-sm-12 col-xs-12">';
            trHTML += '<div class="form-group">';
            trHTML += '<td>' + value.Description + '</td>';
            trHTML += '</div>';
            trHTML += '</div>';


        });
        $('#resultTbl').html(trHTML);
    },
    error: function (jqXHR) {

    }
});

Answer 2

$('#resultTbl').html(trHTML);

将此行放在循环外。它会修复它

Jquery / Html table 仅显示最后一行

Jquery / Html table shows Last row only

html

ajax

jquery

json

asp.net-ajax