Jquery / Html 表仅显示最后一行

Question

我有一个 jQuery / Html 表，在这个表中只有最后一条记录显示。 如果我有 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);

把这条线放在循环之外。 它会修复它