2017-06-17 56 views
1

Iam使用ajax來動態生成表格行。我想爲每個表格行添加序列號,即 - td1。其他一切工作正常,請幫助我爲每個tr添加序列號。在ajax中添加序列號到<tr>

<script> 
    $(document).ready(function() { 
     $('form').on('submit', function (e) { 
      e.preventDefault(); 
      ajx(); 
     }); 

     function ajx() { 
      $('tbody>tr').remove(); 
      var side = $('input[name=pins]:checked').val(); 
      $.ajax({ 
       beforeSend: function() { 
        $('#loader').show(); 
       }, 
       complete: function() { 
        $('#loader').hide(); 
       }, 
       url: "<?php echo base_url('user/genealogy/ajaxLevels')?>", 
       type: "POST", 
       dataType: 'json', 
       data: { 
        side: side 
       }, 
       success: function (result) 
       { 

        var obj = jQuery.parseJSON(JSON.stringify(result)); 
        var id = "#tbl"; 
        $.each(obj, function() { 
         var row = $('<tr>'); 
         var td1 = $('<td />'); 
         var td2 = $('<td />'); 
         var td3 = $('<td />'); 
         var td4 = $('<td />'); 
         var td5 = $('<td />'); 

         td1.text('1'); // I WANT TO ADD SERIAL NUMBER HERE 
         td2.text(this.name); 
         td3.text(this.id); 
         td4.text(this.date); 
         td5.text(this.sponsor_id); 

         row.append(td1); 
         row.append(td2); 
         row.append(td3); 
         row.append(td4); 
         row.append(td5); 

         $(id).append(row); 
        }); 
       } 

      }); 
     } 
    }); 

這是該數據將顯示錶:

<table class="table"> 
    <thead class="text-primary"> 
     <th>S.No.</th> 
     <th>Name</th> 
     <th>Member ID</th> 
     <th>DOJ</th> 
     <th>Sponser ID</th> 
    </thead> 
    <tbody id="tbl"> 
    </tbody> 
</table> 
+0

你想讓數字像1,2,3,4 ...還是別的嗎? –

+0

是的,1,2,3,4,5,6 ...... –

回答

0

你可以只用設置好的來1作爲開始值的變量。
然後在每次迭代中增加這個變量。

success: function (result) 
    { 

    var obj = jQuery.parseJSON(JSON.stringify(result)); 
    var id = "#tbl"; 

    // use i as a counter 
    var i = 1; 

    $.each(obj, function() { 
     var row = $('<tr>'); 
     var td1 = $('<td />'); 
     var td2 = $('<td />'); 
     var td3 = $('<td />'); 
     var td4 = $('<td />'); 
     var td5 = $('<td />'); 

     td1.text(i); // Use i here 
     td2.text(this.name); 
     td3.text(this.id); 
     td4.text(this.date); 
     td5.text(this.sponsor_id); 

     row.append(td1); 
     row.append(td2); 
     row.append(td3); 
     row.append(td4); 
     row.append(td5); 

     $(id).append(row); 

     // Increment i for the next iteration 
     i++; 
    }); 
    } 
+0

謝謝,這很容易。 :) –

0

您還可以使用

$.each(obj, function (key,value) { 

您可以使用key + 1顯示序列號。在每個功能鍵總是從0開始。