时间戳

首页 > 解决方案 > 循环仅显示 1 个元素

javascript - 循环仅显示 1 个元素

问题描述

我正在尝试将对象的元素推送到表格中。所以我设置了一个循环来推送我的对象的每个元素。然而，循环只做 1 个循环。

我刚刚做了一个非常基本的循环，递增“i”直到它达到我的数据长度。

getLigneTab : function() {

    var ligne; debugger
    var nbData = ucManager.listData.length; 
    for (var i = 0; i < nbData; i++) {  

        ligne = '<tr>' 
            + '<td>'+ucManager.listData[0].collaborateur+'</td>'
            + '<td>'+ucManager.listData[0].budget+'</td>'
            + '<td>'+ucManager.listData[0].consomme+'</td>'
            + '<td>'+ucManager.listData[0].raf+'</td>'
            + '<td>'+ucManager.listData[0].nbTicket+'</td>'

        return ligne;
    }       

},

我通过点击一个名为“affiche-chiffre”的按钮进入这个函数：

$('#affichage-chiffre').on("click", function(event) {
        var dateD = $('#debutExport').val();
        var dateF = $('#finExport').val();
        if (dateD == "" && dateD == "") {
            bootbox.alert("Saisissez une période !");
        }
        ucManager.getData(dateD, dateF);
        $('#table').html('');
        $('#table').append(ucManager.getColonnes(dateD, dateF));
        $('#table').append("<tbody></tbody>"); 
        $('#table').find("tbody").append(ucManager.getLigneTab());  
        $('#table').show();
    });

我应该得到至少 7 行，但我只得到对象的第一行。

标签： javascriptobjectfor-loop

解决方案

getLigneTab您的功能有几个问题。

1) 将return语句移到 for 循环之外。这就是导致它只执行1次的原因。

2)ucManager.listData[0]将始终访问数组中的第一个元素。将其更改为ucManager.listData[i].

3）每次通过循环时都设置ligne为一个新字符串，因此退出循环后它只会是一行。改为使用ligne +=。

4）您缺少结束</tr>标签。通过循环将其添加到每次迭代的字符串末尾。

您的函数现在应该如下所示：

getLigneTab : function() {

    var ligne; debugger
    var nbData = ucManager.listData.length; 
    for (var i = 0; i < nbData; i++) {  
        ligne += '<tr>' 
            + '<td>'+ucManager.listData[i].collaborateur+'</td>'
            + '<td>'+ucManager.listData[i].budget+'</td>'
            + '<td>'+ucManager.listData[i].consomme+'</td>'
            + '<td>'+ucManager.listData[i].raf+'</td>'
            + '<td>'+ucManager.listData[i].nbTicket+'</td>'
            + '</tr>';        
    }  
    return ligne;     
}

推荐阅读