再次选择后更新 Html 表 | jQuery |阿贾克斯

Question

我有这个代码，我只选择两名球员并显示这些球员的一些统计数据。 我正在使用只是一个常规表格来显示数据（image1）；

我的问题是，在我选择了另一个玩家之后，我并没有从我选择的新玩家中更新数据，而是创建了另一行（image2）。显示的所有数据都是正确的，但我不希望它在桌子上创建另一行，我想删除过去的玩家并更新到当前的玩家，但我不知道如何完成。

我不是 jquery 最好的，那是我的代码

<script>
        $(document).ready(function() {
//The First player Select

            jQuery("#p1").on('focusout', function(e) {

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                });
                var p1 = $('#p1').val();
                var p2 = $('#p2').val();    

                jQuery.ajax({
                    url: "{{ route('ajax') }}/?p1=" + p1 + "&p2=" + p2,
                    method: 'Get',

                    success: function(result) {

                        $("#player1").append("<h2 class='p1'>" + result[0].player + "</h2>");
                        $("#p1kills").append("<h2 class='alignRight'>" + result[0].kp + "</h2>");
                        $("#p1kda").append("<h2 class='alignRight'>" + result[0].kda + "</h2>");
                        $("#p1cspm").append("<h2 class='alignRight'>" + result[0].cspm + "</h2>");
                        $("#p1gpm").append("<h2 class='alignRight'>" + result[0].gpm + "</h2>");
                        $("#p1dpm").append("<h2 class='alignRight'>" + result[0].dpm + "</h2>");
       

                    }
                });




            });

//The Second player Select
            jQuery("#p2").on('focusout', function(e) {

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                });
                var p2 = $('#p2').val();
                var p1 = $('#p1').val();

                jQuery.ajax({
                    url: "{{ route('ajax') }}/?p1=" + p1 + "&p2=" + p2,
                    method: 'Get',

                    success: function(result) {
                        $("#player2").append("<h2 class='p1' >" + result[1].player + "</h2>");
                        $("#p2kills").append("<h2 >" + result[1].kp + "</h2>");
                        $("#p2kda").append("<h2 >" + result[1].kda + "</h2>");
                        $("#p2cspm").append("<h2 >" + result[1].cspm + "</h2>");
                        $("#p2gpm").append("<h2 >" + result[1].gpm + "</h2>");
                        $("#p2dpm").append("<h2 >" + result[1].dpm + "</h2>");


                    }
                });




            });

        });


    </script>

Answer 1

你必须替换这个

.append()

进入

.html()

我希望你得到你的解决方案谢谢。