表 - 循环和数组 - 源码之家

问题描述：

我正在创建一个如下所示的表，但无法将我的信息放入正确的列/行中。任何帮助将非常感激！谢谢！表 - 循环和数组

我的代码是：

 //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')

问题是什么？什么不起作用？ – Rayon

尝试使用JQuery。 – Hakunamatata

答

这将帮助你做到这一点。您可以通过更改“重复”变量的值来设置您希望重复一组列的次数（并排）。此外，它将验证并仅显示价格在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>');

非常感谢你！太棒了！ – MillyG

然后，您可能需要将其标记为答案:) –

答

喜欢这个？

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>');

在问题中发布了一张图片。我想桌子需要重复，并排 - 一定次数。从图像是4倍 –

答

希望这个片段将帮助

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();

您可以检查此PLUNKER。

注此代码段定制的&此如果阵列中的项目的数量不是4的实施例的倍数可能不工作，如果是array.length 9则仅高达8个元素将被显示

表 - 循环和数组

相关推荐