如何将HTML导出表修复为Excel并产生意外结果

Question

我正在使用PHP，HTML和JavaScript做在线数学测验网站，用于学校作业。我能够导出整个表而没有任何错误，但是当它转到过滤器页面时，它仍然可以导出到Excel文件，但是数据都被弄乱了。

预期结果：

实际结果：

JavaScript：

<script type="text/javascript">
function exportTableToExcel(tableID, filename = '') {
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

    // Specify file name
    filename = filename ? filename + '.xls' : 'excel_data.xls';

    // Create download link element
    downloadLink = document.createElement("a");

    document.body.appendChild(downloadLink);

    if (navigator.msSaveOrOpenBlob) {
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob(blob, filename);
    } else {
        // Create a link to the file
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

        // Setting the file name
        downloadLink.download = filename;

        //triggering the function
        downloadLink.click();
    }
}
</script> 
<button name="create_excel" id="create_excel" class="btn btn-success" onclick="exportTableToExcel('rresult','studentresult')">Backup to Excel</button>

表;

<table class='table table-striped' id="rresult">
 <div id="studentresult">
  <thead>
    <th class='text-primary'>#ID</th>
    <th class='text-primary'>Username</th>
    <th class='text-primary'>Name</th>
    <th class='text-primary'>Quiz Name</th>
    <th class='text-primary'>Correct Answer</th>
    <th class='text-primary'>Total Question</th>
    <th class='text-primary'>Student Mark (%)</th>
    <th class='text-primary'>Student Grade</th>
    <th class='text-primary'>Class</th>
    <th class='text-primary'>Date</th>
</thead>

过滤功能：

<?php 
$query= "SELECT * from result GROUP BY class";
$result = mysqli_query($con,$query);
$test="";
$No= 0;
while($row = mysqli_fetch_assoc($result)){
  $test.= '<option value = "'.$row['class'].'">'.$row['class'].'</option>';
}
?>

if (isset($_POST['submit'])) {
        $test = $_POST['class'];
        if ($test != "") {
          $sql = "SELECT * FROM result WHERE class ='$test'";
          $data = mysqli_query($con,$sql);

          if (mysqli_num_rows($data) > 0) {
            while($row = mysqli_fetch_assoc($data)){
              $No = $No+1;
              $id =$row['id'];
              $username = $row['username'];
              $name = $row['name'];
              $quizname = $row['quiz_name'];
              $score = $row['score'];
              $total = $row['total'];
              $mark = $row['mark'];
              $grade = $row['grade'];
              $class = $row['class'];
              $date = $row['quiz_date'];

              ?>
              <tr>
                <td><?php echo $id; ?></td>
                <td><?php echo $username; ?></td>
                <td><?php echo $name; ?></td>
                <td><?php echo $quizname; ?></td>
                <td><?php echo $score; ?></td>
                <td><?php echo $total; ?></td>
                <td><?php echo $mark; ?></td>
                <td><?php echo $grade; ?></td>
                <td><?php echo $class; ?></td>
                <td><?php echo $date; ?></td>
              </tr>