爲什麼thead在顯示數據時沒有顯示？

Question

我想問一下我的代碼.. 我已經使jQuery的服務器端功能將數據從數據庫中刪除到表中。我所做的代碼首先運作良好，但之後我嘗試用於創建TBODY的代碼不會工作之前創建一個THEAD添加更多的代碼..

這就是我所做的代碼.. 請幫我解決這個

// JavaScript Document 
 

 
$(document).ready(function() { 
 
\t $.ajax({ 
 
\t \t type:"POST", 
 
\t \t url:"../php/absen/spl_inputselect_data.php", 
 
\t \t success: function(data){ 
 
\t \t \t var list = JSON.parse(data); 
 
\t \t \t for(var i=0; i < list.length; i++){ 
 
\t \t \t \t 
 
\t \t \t \t var tr = "<tr>"; 
 
\t \t \t \t theadData = '<tr>' + 
 
     \t \t \t \t '<th>Nama Karyawan</th>' + 
 
     \t \t \t \t '<th>Tanggal</th>' + 
 
\t  \t \t \t \t '<th>Bagian</th>' + 
 
     \t \t \t \t '<th>Cost Center</th>' + 
 
     \t \t \t \t '<th>Jam Mulai</th>' + 
 
     \t \t \t \t '<th>Jam Selesai</th>' + 
 
     \t \t \t \t '<th>Status Lembur</th>' + 
 
     \t \t \t \t '<th>Total Jam</th>' + 
 
     \t \t \t \t '<th>Tugas</th>' + 
 
     \t \t \t \t '</tr>'; 
 
\t \t \t \t tr += "<td>" +list[i]['no']+"</td>"; 
 
\t \t \t \t tr += "<td>" +list[i]['nama']+"</td>"; 
 
\t \t \t \t tr += "<td>" +list[i]['tanggal']+"</td>"; 
 
\t \t \t \t tr += "<td>" +list[i]['jam_mulai']+"</td>"; 
 
\t \t \t \t tr += "<td>" +list[i]['jam_selesai']+"</td>"; 
 
\t \t \t \t tr += "<td>" +list[i]['status']+"</td>"; 
 
\t \t \t \t tr += "<td>" +list[i]['total']+"</td>"; 
 
\t \t \t \t tr += "<td>" +list[i]['bagian']+"</td>"; 
 
\t \t \t \t tr += "<td>" +list[i]['cost']+"</td>"; 
 
\t \t \t \t tr += "<td>" +list[i]['tugas']+"</td>"; 
 
\t \t \t \t tr += "</tr>"; 
 
\t \t \t \t $("#check_data tbody").append(tr); 
 
\t \t \t } 
 
\t \t \t return false; 
 
\t \t } 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Answer 1

您應該將頭直接只有一次，而不是在循環中追加到表：

$(document).ready(function() { 
    $.ajax({ 
     type:"POST", 
     url:"../php/absen/spl_inputselect_data.php", 
     success: function(data){ 
      var list = JSON.parse(data); 

      if(list.length > 0) 
      { 
      $("#check_data thead").html('<tr>' + 
        '<th>Nama Karyawan</th>' + 
        '<th>Tanggal</th>' + 
        '<th>Bagian</th>' + 
        '<th>Cost Center</th>' + 
        '<th>Jam Mulai</th>' + 
        '<th>Jam Selesai</th>' + 
        '<th>Status Lembur</th>' + 
        '<th>Total Jam</th>' + 
        '<th>Tugas</th>' + 
        '</tr>'); 

      for(var i=0; i < list.length; i++){ 

       var tr = "<tr>"; 

       tr += "<td>" +list[i]['no']+"</td>"; 
       tr += "<td>" +list[i]['nama']+"</td>"; 
       tr += "<td>" +list[i]['tanggal']+"</td>"; 
       tr += "<td>" +list[i]['jam_mulai']+"</td>"; 
       tr += "<td>" +list[i]['jam_selesai']+"</td>"; 
       tr += "<td>" +list[i]['status']+"</td>"; 
       tr += "<td>" +list[i]['total']+"</td>"; 
       tr += "<td>" +list[i]['bagian']+"</td>"; 
       tr += "<td>" +list[i]['cost']+"</td>"; 
       tr += "<td>" +list[i]['tugas']+"</td>"; 
       tr += "</tr>"; 
       $("#check_data tbody").append(tr); 
      } 

      } 
      return false; 
     } 
    }); 
});