配列、2次元配列の展開(for文)

//配列
(function(){
    var fruitsArr = [
        'banana', 'apple', 'orange', 'strawberry'
    ];
    var hoge1 = document.getElementById('hoge1');
    var eleUl = document.createElement('ul');
    hoge1.appendChild(eleUl); //#hogeにulを挿入
    for(var i = 0, arrLen = fruitsArr.length; arrLen > i; i++){
        var list = document.createElement('li');
        list.innerHTML=fruitsArr[i];
        eleUl.appendChild(list); //ulにliを挿入
    }
}).call(this);

//2次元配列
(function(){
    var foodsArr = [
        ['banana', 'apple', 'orange',],
        ['poteto', 'carrot', 'cabbage'],
        ['meet', 'chiken', 'pork'],
    ];
    var hoge2 = document.getElementById('hoge2');
    var eleTable = document.createElement('table');

    hoge2.appendChild(eleTable); //#hogeにulを挿入
    for(var i = 0, fArrLen = foodsArr.length; fArrLen > i; i++){
        var eleTr = document.createElement('tr');
        eleTable.appendChild(eleTr);//tableにtrを挿入
        for(var j = 0; 3 > j; j++){
            var eleTd = document.createElement('td');
            eleTr.appendChild(eleTd);//各trにtdを挿入
            eleTd.textContent=foodsArr[i][j];//各tdに配列の値を挿入
        };
    };

}).call(this);

See the Pen js: 配列からリスト、表を作成 by nwstcode (@nwst) on CodePen.

TagTimes

Simple time tracking tool
Developed by Namu Works