Javascript：循环仅输出最后一个值

Question

i am using below loop to print data in javascript

for(var i = 0; i < result.data.length; i++){
     var getbills = result.data;
     var html = "<tr>";
     html+= "<td>"+getbills[i].customername+"</td>";
     html+= "<td>"+getbills[i].customerphone+"</td>";
     html+= "<td>"+getbills[i].tablename+"</td>";
     html+= "<td>"+getbills[i].sale_date+" "+getbills[i].sale_time+"</td>";
     html+= "<td><a href='javascript:void(0)' data-id='"+getbills[i].id+"' 
     class='btn btn-primary' 
     onclick='payforthependingorder("+getbills[i].id+")'>View</a><br /><a 
     href='"+baseURL+"Sale/deletesales/"+getbills[i].id+"' class='btn btn- 
     danger'>Delete</a></td>";
     html+= "</tr>";
     $("#billonholdtable").html(html);
  }

it has following values when i see in network tab

but only last one is printed in table, please helo me with this. Thanks

Answer 1

Take $("#billonholdtable").html(html); out of loop or

use

$("#billonholdtable").append(html);

Answer 2

You use $("#billonholdtable").html(html); in your code, which makes every iteration re-generate a new html instead of appending it.

How about this?

var content= '';
for(var i = 0; i < result.data.length; i++){
     var getbills = result.data;
     var html = "<tr>";
     html+= "<td>"+getbills[i].customername+"</td>";
     html+= "<td>"+getbills[i].customerphone+"</td>";
     html+= "<td>"+getbills[i].tablename+"</td>";
     html+= "<td>"+getbills[i].sale_date+" "+getbills[i].sale_time+"</td>";
     html+= "<td><a href='javascript:void(0)' data-id='"+getbills[i].id+"' 
     class='btn btn-primary' 
     onclick='payforthependingorder("+getbills[i].id+")'>View</a><br /><a 
     href='"+baseURL+"Sale/deletesales/"+getbills[i].id+"' class='btn btn- 
     danger'>Delete</a></td>";
     html+= "</tr>";
     content += html;
}
$("#billonholdtable").html(content);

Answer 3

You must declare a variable html is out of the loop. var html=''; within the loop you have to define as mentioned below. html+= "values";