表-循环和数组
Tables - loops and arrays
我正在创建一个像下面这样的表,但无法将信息放入正确的列/行中。任何帮助都将不胜感激!谢谢
在此处输入图像描述
我的代码是:
//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个元素。
相关文章:
- javascript:数组循环
- 如何将数组循环到JSON代码中
- 而与数组循环
- JavaScript 数组/循环不起作用
- AJAX在数组循环中调用,只在上一次完成后调用next
- 数组循环以获取单个值
- JavaScript数组循环
- Javascript 2D数组循环停止
- 通过Javascript中的JSON数组循环
- 为什么以下 forEach 数组循环未返回未定义
- 如何在数组循环中过滤数据
- 如何在数组循环 222 中过滤数据
- 数组循环以确定范围平均值
- 对象的数组循环
- 对象键及其值的数组循环
- 虽然的缺点!未定义的数组循环
- 数组循环导致无限循环
- 数组循环 - 处理下拉列表中的空值
- 在 Node 中连接数组循环.js glob 结果
- JavaScript 图像数组循环