表中的 Javascript 输出对象有助于删除重复代码
Javascript output objects in table help to remove repeat code
我想知道你是否可以帮助我,我在下面的链接中创建了一个类和对象,并且我有将其显示在表中的代码。如果我继续我的方式,它将是 99 行重复代码,我想知道是否有人知道用更少的代码做到这一点的方法。
谢谢詹姆斯http://codepen.io/anon/pen/dPOOXMhttp://jsfiddle.net/evt2pex8/
function createTable() {
// Create table.
var table = document.createElement('table');
// Apply CSS for table
table.setAttribute('class', 'article');
// Insert New Row for table at index '0'.
var row1 = table.insertRow(0);
// Insert New Column for Row1 at index '0'.
var row1col1 = row1.insertCell(0);
row1col1.innerHTML = hat.product;
// Insert New Column for Row1 at index '1'.
var row1col2 = row1.insertCell(1);
row1col2.innerHTML = hat.description;
// Insert New Column for Row1 at index '2'.
var row1col3 = row1.insertCell(2);
row1col3.innerHTML = hat.stockLevel;
// Insert New Column for Row1 at index '3'.
var row1col4 = row1.insertCell(3);
row1col4.innerHTML = hat.price;
var row2 = table.insertRow(0);
// Insert New Column for Row2 at index '0'.
var row2col1 = row2.insertCell(0);
row2col1.innerHTML = beltsF.product;
// Insert New Column for Row2 at index '1'.
var row2col2 = row2.insertCell(1);
row2col2.innerHTML = beltsF.description;
// Insert New Column for Row2 at index '2'.
var row2col3 = row2.insertCell(2);
row2col3.innerHTML = beltsF.stockLevel;
// Insert New Column for Row2 at index '3'.
var row2col4 = row2.insertCell(3);
row2col4.innerHTML = beltsF.price;
var row3 = table.insertRow(0);
// Insert New Column for Row3 at index '0'.
var row3col1 = row3.insertCell(0);
row3col1.innerHTML = trousers.product;
// Insert New Column for Row3 at index '1'.
var row3col2 = row3.insertCell(1);
row3col2.innerHTML = trousers.description;
// Insert New Column for Row3 at index '2'.
var row3col3 = row3.insertCell(2);
row3col3.innerHTML = trousers.stockLevel;
// Insert New Column for Row3 at index '3'.
var row3col4 = row3.insertCell(3);
row3col4.innerHTML = trousers.price;
// Append Table into div.
var div = document.getElementById('divTable');
div.appendChild(table);
}
将 stock 对象移动到 Array 中,并循环它们以创建行。
像这样:
var stocks = [];
stocks.push(new Stock("Bag (F)", "Leather Shoulder Bag", 4, 50.45));
stocks.push(new Stock("Blouse (F)", "Vintage Blue Silk Polka Dot Blouse", 8, 45.99));
stocks.push(new Stock("Boots (F)", "Soft Leather Brown Ankle Boots", 3, 65.35));
stocks.push(new Stock("Belts (F)", "Woven Finish Fashion Belt", 15, 21.99));
stocks.push(new Stock("Shirt (M)", "Jacquard Patter Wrangler Western Shirt", 19, 34.87));
stocks.push(new Stock("Shoes (M)", "Suede Ankle Boots", 6, 55.00));
stocks.push(new Stock("Trousers (M)", "Izod Peach Chinos", 23, 31.75));
stocks.push(new Stock("Belt (M)", "Suede Casual Belt", 4, 22.98));
stocks.push(new Stock("Hat (M)", "Trilby Style Brown Woven Fix", 2, 67.80));
function createTable() {
// Create table.
var table = document.createElement('table');
// Apply CSS for table
table.setAttribute('class', 'article');
for(var i = 0;i<stocks.length;i++){
var row1 = table.insertRow(0);
var row1col1 = row1.insertCell(0);
var stock = stocks[i]
row1col1.innerHTML = stock.product;
// Insert New Column for Row1 at index '1'.
var row1col2 = row1.insertCell(1);
row1col2.innerHTML = stock.description;
// Insert New Column for Row1 at index '2'.
var row1col3 = row1.insertCell(2);
row1col3.innerHTML = stock.stockLevel;
// Insert New Column for Row1 at index '3'.
var row1col4 = row1.insertCell(3);
row1col4.innerHTML = stock.price;
}
// Append Table into div.
var div = document.getElementById('divTable');
div.appendChild(table);
}
参考你的小提琴,而不是像这样声明对象:
// Instantiate new objects with 'new'
var headings = new Stock("Product", "Description", "Stock Level", "Price");
var shorts = new Stock("Shorts (F)", "Stone Wash Dmin Shorts ", 20, 25.90);
var bag = new Stock("Bag (F)", "Leather Shoulder Bag", 4, 50.45);
var blouse = new Stock("Blouse (F)", "Vintage Blue Silk Polka Dot Blouse", 8, 45.99);
var boots = new Stock("Boots (F)", "Soft Leather Brown Ankle Boots", 3, 65.35);
var beltsF = new Stock("Belts (F)", "Woven Finish Fashion Belt", 15, 21.99);
var shirt = new Stock("Shirt (M)", "Jacquard Patter Wrangler Western Shirt", 19, 34.87);
var shoes = new Stock("Shoes (M)", "Suede Ankle Boots", 6, 55.00);
var trousers = new Stock("Trousers (M)", "Izod Peach Chinos", 23, 31.75);
var beltsM = new Stock("Belt (M)", "Suede Casual Belt", 4, 22.98);
var hat = new Stock("Hat (M)", "Trilby Style Brown Woven Fix", 2, 67.80);
做:
// Instantiate new objects with 'new'
var products = [ ];
products.push(new Stock("Product", "Description", "Stock Level", "Price"));
products.push(new Stock("Shorts (F)", "Stone Wash Dmin Shorts ", 20, 25.90));
....
所以你有一个产品阵列。然后,您的函数将变为:
function createTable(products) {
// Create table.
var table = document.createElement('table');
// Apply CSS for table
table.setAttribute('class', 'article');
for (var i = 0; i < products.length; i++) {
var pr = products[i]
var row1 = table.insertRow(i);
var row1col1 = row1.insertCell(1);
row1col1.innerHTML = pr.product;
// Insert New Column for Row1 at index '1'.
var row1col2 = row1.insertCell(1);
row1col2.innerHTML = pr.description;
// Insert New Column for Row1 at index '2'.
var row1col3 = row1.insertCell(2);
row1col3.innerHTML = pr.stockLevel;
// Insert New Column for Row1 at index '3'.
var row1col4 = row1.insertCell(3);
row1col4.innerHTML = pr.price;
}
// Append Table into div.
var div = document.getElementById('divTable');
div.appendChild(table);
}
然后,您将在传递 Products 数组的脚本中调用它。
相关文章:
- 如何从rails中的代码中删除新行( )
- 解析云代码作业:删除在数据库中已经存在一个小时的行
- Javascript/JQuery删除代码中的父TR问题
- 使用Google闭包编译器调试代码删除
- 改进js代码以删除全局变量和函数
- javascript代码,用于删除firefox中的空白,但在IE和chrome中无法正常工作
- 如何在 JavaScript 中使用正则表达式从颜色代码中删除“#”
- 使用 Javascript 动态删除行.我的代码有什么问题
- 通过找到一种删除许多 if 语句的方法来简化代码
- 从此代码中删除 Jquery
- 如何删除DOM事件处理程序的重复JavaScript代码
- 如何从此代码笔中删除数字和秒文本
- JavaScript-Regex删除代码/特殊字符/数字等
- 用于删除数组中的零的Javascript函数代码
- 删除alert()后,代码的行为会很奇怪
- 删除方法中的冗余代码
- JavaScript:删除一部分代码,并在单击时删除一个元素
- 文件上传器表单提交事件调用面板以显示包含文件更新程序我想删除代码重写在 jquery 中使用循环重写所有文件类型
- this.form.submit() 在删除代码后仍然会触发
- Typescript 删除代码中未使用的导入语句