Append Databases Erfolg, aber thead Abschnitt gegangen

Question

Ich versuche append zu verwenden, um meine Tabelle zu füllen. Bitte werfen Sie einen Blick

<table width="100%" id="tbltbl" class="asoy table table-bordered table-striped"> 
     <thead> 
      <tr> 
       <th width="1%">No</th> 
       <th width="14%">Outlet</th> 
       <th width="14%">Leader</th> 
       <th width="14%">Chief</th> 
       <th width="14%">RM</th> 
        <th> Action </th> 
      </tr> 
     </thead> 
    </table>  

für Standard meinem Tisch so aussehen Ich betreibe das onchange Methode und ich erhalten diese

[{"OutletCode":"K-BDIP3","Description":"BANDUNG INDAH PLAZA 3","NipLeader":"0802400","NipRM":"0802678" 
,"NipChief":"-"},{"OutletCode":"K-CMHM2","Description":"KIOS CIMAHI MALL 2","NipLeader":"0802400","NipRM" 
:"0802678","NipChief":"-"},{"OutletCode":"K-TSPA3","Description":"TASIK PLAZA ASIA 3","NipLeader":"0802400" 
,"NipRM":"0802678","NipChief":"-"},{"OutletCode":"K-BDCW2","Description":"KIOS BANDUNG CIWALK 2","NipLeader" 
:"0802400","NipRM":"0802678","NipChief":"-"}] 

dann i anhängen

function byarea(){ 
     $(".asoy").empty(); 
     var area = $("#pilihanarea").val(); 
     var tipe = $('#tipe').val(); 
     var formUrl = "<?=base_url();?>arealeader/finddata"; 
     var angka = 1; 
      $.ajax({ 
       url: formUrl, 
       type: 'POST', 
       data: {tipe:tipe,area:area}, 
       success: function(data, textStatus, jqXHR){ 
        var newdata = JSON.parse(data); 
        $.each(newdata, function(key, val) { 
         $('.asoy').append('<tbody><tr> <td>'+ (angka++) +'</td>' + 
              '<td>' + val.OutletCode + '</td>' + 
              '<td>' + val.NipLeader + '</td>' + 
              '<td>' + val.NipChief +'</td>' + 
              '<td>' + val.NipRM +'</td>' + 
              '<td>----</td>' + 
              '</tr></tbody></thead>'); 
         }); 
       } 
      }); 
    } 

und meine Tabelle sehen so aus

Es scheint, ich verliere meine <thead>..</thead> Abschnitt. Irgendeine Lösung dafür? Vielen Dank im Voraus ...

Answer 1

Erstellen Ihnen einen leeren <tbody class="asoy"></tbody> kurz vor dem Schließen </table>-Tag und die Klasse „asoy“ aus dem <table> Tag entfernen. Entfernen Sie dann die <tbody> Tags von Ihrem Anruf zu append().

Ihr $(".asoy").empty(); entfernt derzeit den gesamten Tabelleninhalt, aber Sie möchten nur den Text löschen, nicht die Überschriften. Durch die Erstellung eines Tags <tbody> wird dieses Problem behoben, während die Funktion immer noch reentrant ist (d. H. Sie können sie später erneut ausführen und den Inhalt nicht duplizieren).

Answer 2

Basierend auf Ihren Code

$('.asoy').append('<tbody> 
          <tr> <td>'+ (angka++) +'</td>' + 
           '<td>' + val.OutletCode + '</td>' + 
           '<td>' + val.NipLeader + '</td>' + 
           '<td>' + val.NipChief +'</td>' + 
           '<td>' + val.NipRM +'</td>' + 
           '<td>----</td>' + 
           '</tr> 
        </tbody> 
        </thead>'); // <--- What this tag for? 
             I'm not sure but I think its a wrong tagging. 
             tbody should not be inside a thead unless your 
             header will consist of another table element