表-循环和数组

Tables - loops and arrays

本文关键字:数组 循环      更新时间:2023-09-26

我正在创建一个像下面这样的表,但无法将信息放入正确的列/行中。任何帮助都将不胜感激!谢谢

在此处输入图像描述

我的代码是:

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

这样?

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

这将帮助您做到这一点。您可以通过更改"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>');

希望这个片段能帮助

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

你可以检查一下这个塞子。

注意这个片段是定制的&如果数组中的项目数不是4的倍数,则这可能不起作用。例如,如果array.length为9,则最多只能显示8个元素。