2017-06-17 7 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にsetted変数を使用することができます。
次に、各繰り返しでこの変数をインクリメントします。

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

また、あなたはシリアル番号を表示するためにkey + 1を使用することができます

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

を使用することができます。それぞれの機能では、キーは常に0から始まります。

関連する問題