Как сделать автоматическое увеличение числа на моем столе

Question

Я хочу сделать автоматическое приращение номера в моей таблице

Данные загрузки таблицы из ajax запроса с jquery вот так

function loadData(){
    $.ajax({
      type: "post",
      url: "../myCrud/display.php",             
      dataType: "html",   //expect html to be returned                
      success: function(result){                    
        var resObj = JSON.parse(result);
        var dataHandler = $("#loader");
        $.each(resObj,function(key,val){
          i = 1;
          for();
          var newRow = `<tr><td>${i}</td><td>${val.id}</td><td>${val.product_name}</td><td>${val.stock}</td><td>${val.price}</td><td>${val.product_desc}</td><td>${val.sold}</td><td>${val.img}</td></tr>`
          dataHandler.append(newRow);
        })
      }
    })
}

, а это мой html code:

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Product Id</th>
      <th>Product Name</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Product Description</th>
      <th>Sold</th>
      <th>Image</th>
    </tr>
  </thead>
  <tbody id="loader">

  </tbody>
</table>

Я хочу, чтобы число в столбце «#» было автоматическим.

Answer 1

В своем сообщении вы только объявляете i внутри l oop, и оно не увеличивается, поэтому поместите i за пределы l oop и увеличьте его внутри l oop. Попробуйте, как показано ниже.

function loadData(){
$.ajax({
  type: "post",
  url: "../myCrud/display.php",             
  dataType: "html",   //expect html to be returned                
  success: function(result){                    
    var resObj = JSON.parse(result);
    var dataHandler = $("#loader");
    var i = 1;
    $.each(resObj,function(key,val){
      i = i++;
      for();
      var newRow = `<tr><td>${i}</td><td>${val.id}</td><td>${val.product_name}</td><td>${val.stock}</td><td>${val.price}</td><td>${val.product_desc}</td><td>${val.sold}</td><td>${val.img}</td></tr>`
      dataHandler.append(newRow);
    })
  }
})
}

Answer 2

function loadData(){
    let i = 1;
    $.ajax({
      type: "post",
      url: "../myCrud/display.php",             
      dataType: "html",   //expect html to be returned                
      success: function(result){                    
        var resObj = JSON.parse(result);
        var dataHandler = $("#loader");
        $.each(resObj,function(key,val){
          i = i+1;
          for();
          var newRow = `<tr><td>${i}</td><td>${val.id}</td><td>${val.product_name}</td><td>${val.stock}</td><td>${val.price}</td><td>${val.product_desc}</td><td>${val.sold}</td><td>${val.img}</td></tr>`
          dataHandler.append(newRow);
        })
      }
    })
}