javascript - 关于下拉选择的新 Ajax 请求

Question

我有三个表，我使用选择列表元素显示每个表，并使用 ajax 和 jquery 返回表。我希望每当我从列表中选择一个新表时，ajax 应该只为我带来该表中的数据。

这是我的表格:

<div class="panel">
                <div class="panel-heading">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Term</span>
                            <!-- I passed the tables name as values for a specific period -->
                            <select name="term" class="form-control" id="term">
                                <option value="">Select Period</option>
                                <option value="period_one">1st Period</option>
                                <option value="period_two">2nd Period</option>
                            </select>
                        </div>
                </div>
                <div class="panel-body">
                    <table class="table table-responsive table-bordered table-condensed table-striped table-hover" id="dataTable">
                        <thead>
                            <tr>
                                <th>Student Name</th>
                                <th>Subject</th>
                                <th>Class</th>
                                <th>Score</th>
                            </tr>
                        </thead>
                        <tbody id="periodTable">

                        </tbody>
                    </table>
                </div>
            </div>

问题不在于我没有得到想要的结果。我得到了我想要的结果，这就是为什么我觉得不需要从 findGrades.php 添加代码。

这是我的脚本:

$(document).ready(function() {
$('#term').on('change', function() {
  /* Act on the event */
    var term = $('#term').val();

    if (term != '') {
      $.ajax({
        url:"findGrades.php",
        type:"post",
        data:{"term":term},
        dataType:"json",
        success:function(data){
            // Lfrankie solution
            $("#periodTable").replaceWith('<tbody id="periodTable"></tbody>');

           for (var count = 0; count < data.length; count++) {
                var htmlData = '<tr><td data-type="text" data-name="student_name" data-pk="'+data[count].id+'" class="student_name">'+data[count].first_name+' '+data[count].middle_name+' '+data[count].surname+'</td>';

                htmlData += '<td data-type="text" data-name="subject_name" data-pk="'+data[count].id+'" class="subject_name">'+data[count].subject_name+'</td>';

                htmlData += '<td data-type="text" data-name="class_name" data-pk="'+data[count].id+'" class="class_name">'+data[count].class_name+'</td>';

                if (data[count].score <= 69 ) {
                    htmlData += '<td style="color:red;" data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
                } else {
                    htmlData += '<td data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
                }

               //I feel this is where my problem lies
               $("#periodTable").append(htmlData);

            }
            $('#dataTable').DataTable();
        }
      });
    } else {
      $("#periodTable").html('');

    }

 });
});

我遇到的问题是，每当我选择一个表时，它都会带来很好的结果，但是当我选择一个新表时，它会将新结果添加到旧结果中。

例如:表 1:

1. 猫
2. 老鼠

表2 1. 猫 2. 老鼠 3. 狗 3.山羊

而结果 2 应该只显示“狗”和“山羊”。我意识到这是因为我添加数据的方式$("#periodTable").append(htmlData);。我尝试将其更改为 $("#periodTable").html(htmlData); ，它仅从表中返回单个项目，例如表 1 中的“cat”和表 2 中的“rat”

我怎样才能有效地让它发挥作用。如果需要更多信息，请告诉我。

更新:刚刚按照一些人的要求添加了我的html。我还添加了一个重要的方面，我忘记提及“Datables”，我也添加了它。

Answer 1

在for循环之前声明变量htmlData，并在for循环之后编写$("#periodTable").html(htmlData);。

 $(document).ready(function() {
        $('#term').on('change', function() {
          /* Act on the event */
            var term = $('#term').val();

            if (term != '') {
              $.ajax({
                url:"findGrades.php",
                type:"post",
                data:{"term":term},
                dataType:"json",
                success:function(data){
                   var htmlData="";
                   for (var count = 0; count < data.length; count++) {
                        htmlData += '<tr><td data-type="text" data-name="student_name" data-pk="'+data[count].id+'" class="student_name">'+data[count].first_name+' '+data[count].middle_name+' '+data[count].surname+'</td>';

                        htmlData += '<td data-type="text" data-name="subject_name" data-pk="'+data[count].id+'" class="subject_name">'+data[count].subject_name+'</td>';

                        htmlData += '<td data-type="text" data-name="class_name" data-pk="'+data[count].id+'" class="class_name">'+data[count].class_name+'</td>';

                        if (data[count].score <= 69 ) {
                            htmlData += '<td style="color:red;" data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
                        } else {
                            htmlData += '<td data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
                        }



                    }

                       $("#periodTable").html(htmlData);
                }
              });
            } else {
              $("#periodTable").html('');

            }

         });
        });