テーブル - ループと配列

Question

私は下のようなテーブルを作成しようとしていますが、私の情報を右の列/行に入れることはできません。どんな助けでも大歓迎です！ありがとう！

enter image description here

私のコードは次のようになります。このよう

 //data provided by HomewareCity for shopping catalogue  
     var productListArr = new Array('Salad Server Set', 'Party Serviette Holder', 
      'Tea Set', 'Mixing Bowl Set', 'Knife Block Set', 'Coffee Capsule Holder', 
      'Plastic Sensor Soap Pump', 'Storage Bucket', 'Oven Glove', 'Apron', 
      'Biscuit Barrel', 'Chopping Board', 'Carioca Cups', 'Soup Bowls', 
      'Elevate Wood Turner', 'Pasta Machine', 'Teapot', 'Cake Pop Scoop', 
      'Cookbook Stand', 'Chocolate Station', 'Coffee Maker', 'Pepper Mill', 
      'Salt Mill', 'Glass Storage Jar', 'Measuring jug', 'Kitchen Scale', 
      'Tenderiser', 'Pizza Docker', 'Knife Sharpener', 'Steel Cork Opener', 
      'Steel Garlic Press', 'Steel Can Opener', 
      'Stainless Steel Crank Flour Sifter', 'Mineral Stone Mortar and Pestle', 
      'Citrus Cather', 'Cherry & Olive Pitter', 'Multi Grater-Detachable', 
      'Stainless Steel Colander', 'Steel Pizza Pan', 'Pop Container'); 
     var priceListArr = new Array(18.70, 11.95, 39.95, 49.95, 99.95, 29.95, 79.95, 24.95, 
      9.95, 29.95, 39.95, 12.95, 54.95, 43.00, 19.95, 144.95, 29.95, 9.95, 
      29.95, 34.95, 29.00, 84.94, 84.95, 4.95, 19.95, 39.95, 34.95, 19.95, 
      79.95, 36.95, 34.95, 36.95, 33.95, 74.95, 19.95, 27.95, 26.95, 44.95, 
      12.95, 22.95); 
     var orderedProductCodeArr = new Array []; 
     var quantityArr = new Array();   
document.write('<table width="80%" height="150px" cellpadding="2px" cellspacing="3px" border="1">'); 
for(var i=0; i<orderedProductCodeArr.length; i++) 

document.write('<tr><th>Code</th></tr') 
document.write('<tr><th>Product</th></tr'); 
document.write('<tr><th>Price</th></tr') 

{ 
document.write('<tr><td>' + orderedProductCodeArr[i] + '</td></tr>'); 
} 
document.write('</table') 
for(var i=0; i<priceListArr.length; i++) 
{ 
document.write('<tr><td>' + priceListArr[i] + '</td></tr>'); 
} 
document.write('</table') 

Answer 1

これはあなたがそれをするのに役立ちます。 'repeat'変数の値を変更することで、列のセットを繰り返す回数を並べることができます。また、検証し、priceListArrに価格を持つアイテムのみを表示します。これは、製品と価格表に一致する数の品目がない場合に発生する可能性のあるエラーからあなたを助けます

var productListArr = new Array('Salad Server Set', 'Party Serviette Holder', 
    'Tea Set', 'Mixing Bowl Set', 'Knife Block Set', 'Coffee Capsule Holder', 
    'Plastic Sensor Soap Pump', 'Storage Bucket', 'Oven Glove', 'Apron', 
    'Biscuit Barrel', 'Chopping Board', 'Carioca Cups', 'Soup Bowls', 
    'Elevate Wood Turner', 'Pasta Machine', 'Teapot', 'Cake Pop Scoop', 
    'Cookbook Stand', 'Chocolate Station', 'Coffee Maker', 'Pepper Mill', 
    'Salt Mill', 'Glass Storage Jar', 'Measuring jug', 'Kitchen Scale', 
    'Tenderiser', 'Pizza Docker', 'Knife Sharpener', 'Steel Cork Opener', 
    'Steel Garlic Press', 'Steel Can Opener', 
    'Stainless Steel Crank Flour Sifter', 'Mineral Stone Mortar and Pestle', 
    'Citrus Cather', 'Cherry & Olive Pitter', 'Multi Grater-Detachable', 
    'Stainless Steel Colander', 'Steel Pizza Pan', 'Pop Container'); 

var priceListArr = new Array(18.70, 11.95, 39.95, 49.95, 99.95, 29.95, 79.95, 24.95, 
    9.95, 29.95, 39.95, 12.95, 54.95, 43.00, 19.95, 144.95, 29.95, 9.95, 
    29.95, 34.95, 29.00, 84.94, 84.95, 4.95, 19.95, 39.95, 34.95, 19.95, 
    79.95, 36.95, 34.95, 36.95, 33.95, 74.95, 19.95, 27.95, 26.95, 44.95, 
    12.95, 22.95); 

var orderedProductCodeArr = new Array(); // Not used 
var quantityArr = new Array(); // Not used 

var repeat = 4; // Repeat a set of columns, this many times, side by side 
var itemIndex = 0; 

document.write('<table width="80%" height="150px" cellpadding="2px" cellspacing="3px" border="1">'); 

// Set the table header. We will repeat this based on how many 'sets' of tables we show 
document.write('<tr>'); 
for (i = 0; i < repeat; i++) { 
    document.write('<th>Code</th><th>Product</th><th>Price</th>'); 
} 
document.write('</tr>'); 

for (var j = 0; j < productListArr.length; j += repeat) { 
    document.write('<tr>'); 
    for (var m = 0; m < repeat; m++) { 
     itemIndex = j + m; 
     if ((productListArr[itemIndex] !== undefined) && (priceListArr[itemIndex] !== undefined)) { 
      document.write('<td>' + itemIndex + '</td><td>' + productListArr[itemIndex] + '</td><td>' + priceListArr[itemIndex] + '</td>'); 
     } 
    } 
    document.write('</tr>'); 
} 

document.write('</table>'); 

Answer 2

？

var productListArr = new Array('Salad Server Set', 'Party Serviette Holder', 
 
      'Tea Set', 'Mixing Bowl Set', 'Knife Block Set', 'Coffee Capsule Holder', 
 
      'Plastic Sensor Soap Pump', 'Storage Bucket', 'Oven Glove', 'Apron', 
 
      'Biscuit Barrel', 'Chopping Board', 'Carioca Cups', 'Soup Bowls', 
 
      'Elevate Wood Turner', 'Pasta Machine', 'Teapot', 'Cake Pop Scoop', 
 
      'Cookbook Stand', 'Chocolate Station', 'Coffee Maker', 'Pepper Mill', 
 
      'Salt Mill', 'Glass Storage Jar', 'Measuring jug', 'Kitchen Scale', 
 
      'Tenderiser', 'Pizza Docker', 'Knife Sharpener', 'Steel Cork Opener', 
 
      'Steel Garlic Press', 'Steel Can Opener', 
 
      'Stainless Steel Crank Flour Sifter', 'Mineral Stone Mortar and Pestle', 
 
      'Citrus Cather', 'Cherry & Olive Pitter', 'Multi Grater-Detachable', 
 
      'Stainless Steel Colander', 'Steel Pizza Pan', 'Pop Container'); 
 
     var priceListArr = new Array(18.70, 11.95, 39.95, 49.95, 99.95, 29.95, 79.95, 24.95, 
 
      9.95, 29.95, 39.95, 12.95, 54.95, 43.00, 19.95, 144.95, 29.95, 9.95, 
 
      29.95, 34.95, 29.00, 84.94, 84.95, 4.95, 19.95, 39.95, 34.95, 19.95, 
 
      79.95, 36.95, 34.95, 36.95, 33.95, 74.95, 19.95, 27.95, 26.95, 44.95, 
 
      12.95, 22.95); 
 
     var orderedProductCodeArr = new Array(); 
 
     var quantityArr = new Array();   
 
document.write('<table width="80%" height="150px" cellpadding="2px" cellspacing="3px" border="1">'); 
 
document.write('<th>Code</th>'); 
 
document.write('<th>Product</th>'); 
 
document.write('<th>Price</th>'); 
 
for(var i=0; i<productListArr.length; i++){ 
 

 
document.write('<tr><td>' + i + '</td>'); 
 
document.write('<td>' + productListArr[i] + '</td>'); 
 
document.write('<td>' + priceListArr[i] + '</td></tr>'); 
 
} 
 
document.write('</table>');

Answer 3

このスニペットは、あなたがこのPLUNKERを確認することができます

function _createTable(){ 
    var _getTable = document.getElementById('tableBody') 
    var _tr = document.createElement('tr'); 
    for(var i=0;i<=priceListArr.length;i++){ 
    var _td0= document.createElement('td'); 
    var _td1= document.createElement('td'); 
    var _td2= document.createElement('td'); 
     _td0.textContent = i; 
     _td1.textContent = productListArr[i]; 
     _td2.textContent = priceListArr[i]; 
    _tr.appendChild(_td0); 
    _tr.appendChild(_td1); 
    _tr.appendChild(_td2); 


    if((_tr.children.length)%4 ===0){ 
    _getTable.appendChild(_tr); 
    _tr = document.createElement('tr'); 
    } 
    } 
}  

_createTable(); 

を助けることを願っています。 Array.lengthとはのみ点で最大8つの要素を示すが9である場合

注このスニペットは、テーラーは、アレイ内の項目の数は4例の倍数でない場合、動作しない可能性が&これをなされる