的js只返回表的第一行

Question

我有以下几点：

function builTable(){ 
    for(i = 0; i< source.Products.length; i++){ 

     var sourceProducts = source.Products[i]; 
      row = '<tr><td>sth</td><td>'; 
      row += sourceProducts.Product; 
      row += '</td><td>'; 
      row += sourceProducts.Bookings + '</td><td>'; 
      row += sourceProducts.Percentage + '%' + '</td><td>'; 
      row += sourceProducts.Transactions + '</td></tr>'; 

     $('table').append(row); 

    } 


    } 

    $(document).ready(function(){ 

    builTable(); 

    }); 

它：

function builTable(){ 
    for(i = 0; i< source.Products.length; i++){ 

     var sourceProducts = source.Products[i]; 
      row = '<tr><td>sth</td><td>'; 
      row += sourceProducts.Product; 
      row += '</td><td>'; 
      row += sourceProducts.Bookings + '</td><td>'; 
      row += sourceProducts.Percentage + '%' + '</td><td>'; 
      row += sourceProducts.Transactions + '</td></tr>'; 

      return row; 

    } 

    } 

    function generateTable(){ 
    $('table').append(builTable()); 
    } 

    $(document).ready(function(){ 

    generateTable(); 

    }); 

，如果我将其更改为以下这仅附加表的第一行然而，工作正常，我想有一个更具结构化的代码，其功能服务于他们的目的：

• 一个函数用于构建表和一个用于appendi （如第一个例子所示）。

JSON格式：

var source = { 
    "Products": [ 
     { 
      "Product": "xxxxx.com", 
      "Bookings": 560, 
      "Percentage": 55.82, 
      "Transactions": "xxxx.xx" 
     }, 
     { 
      "Product": "xxxxx Mobile", 
      "Bookings": 487, 
      "Percentage": 9.12, 
      "Transactions": "xxxx.xx" 
     }, 
     { 
      "Product": "xx 24-7", 
      "Bookings": 478, 
      "Percentage": 8.95, 
      "Transactions": "xxxx.xx" 
     }, 
     { 
      "Product": "xxxxxx", 
      "Bookings": 422, 
      "Percentage": 7.9, 
      "Transactions": "xxxx.xx" 
     }, 
     { 
      "Product": "API", 
      "Bookings": 315, 
      "Percentage": 5.9, 
      "Transactions": "xxxx.xx" 
     }, 
     { 
      "Product": "API", 
      "Bookings": 315, 
      "Percentage": 2.83, 
      "Transactions": "xxxx.xx" 
     } 
    ], 
    "Total": { 
     "Bookings": 315, 
     "Transactions": "xxxx.xx" 
    } 
} 

任何帮助吗？

Answer 1

function builTable(){ 
    var table = ""; 

    for(i = 0; i< source.Products.length; i++){ 

     var sourceProducts = source.Products[i], 
      row = '<tr><td>sth</td><td>'; 

     row += sourceProducts.Product; 
     row += '</td><td>'; 
     row += sourceProducts.Bookings + '</td><td>'; 
     row += sourceProducts.Percentage + '%' + '</td><td>'; 
     row += sourceProducts.Transactions + '</td></tr>'; 

     table += row; 

    } 

    return table; 
    } 

    function generateTable(){ 
    $('table').append(builTable()); 
    } 

    $(document).ready(function(){ 

    generateTable(); 

    }); 

Answer 2

这是因为row在每次循环开始时都被重置。

function builTable(){ 
    for(i = 0; i< source.Products.length; i++){ 

     var sourceProducts = source.Products[i]; 

      // here is the culprit 
      row = '<tr><td>sth</td><td>'; 


      row += sourceProducts.Product; 
      row += '</td><td>'; 
      row += sourceProducts.Bookings + '</td><td>'; 
      row += sourceProducts.Percentage + '%' + '</td><td>'; 
      row += sourceProducts.Transactions + '</td></tr>'; 

      return row; 

    } 

    }