【无标题】

"use strict";
// Predefined keys for LS
const CATEGORY_KEY = "currentCategoryIndex";
const ITEM_KEY = "currentItemIndex";
const WAREHOUSE_KEY = "warehouseData";
class ClothingItem {
    // TODO: Task 1
    name = "";
    stock = 0;
    price = 0;
    getName() {
        return this.name
    }
    getStock() {
        return this.stock
    }
    getPrice() {
        return this.price
    }
    setName() {
        return this.name
    }
    setStock() {
        return this.stock
    }
    setPrice() {
        return this.price
    }


}

class Inventory {
    // TODO: Task 1
    // _warehouse=[];
    // getWarehouse(){
    //     return this._warehouse
    // }
    i=0
   per=[]; 
    newCategory = '';
    flag =false
    category= [];
    fromData(data){
        return data
    }
    getItem(categoryIndex,itemIndex){
        return null
    }
    addCategory(data) {
        this.category.push(data)
        this.newCategory = data
        this.flag=true
        return this.category
    }
    addTable(data){
        var addTable = document.getElementById('inventoryContainer')
        var addSpan =document.createElement('span')
        addSpan.innerText =data
        addTable.appendChild(addSpan)
            //   创建表头
         var table=document.createElement('table')
         var thead=document.createElement('thead')
         var tbody=document.createElement('tbody')
            tbody.id=data
         //创建行
         var row=document.createElement('tr');
         thead.appendChild(row)
        //  /*创建第一列属性*/
        //  var IndexCell=document.createElement('td');
        //  //向填充数据
        //  IndexCell.innerText='Index';
        //  row.appendChild(IndexCell);
         //创建第二列
         var newItemNameCell=document.createElement('td');
         //向填充数据
         newItemNameCell.innerText='Item';
         //加入行
         row.appendChild(newItemNameCell);
         /*创建第三列属性 和上面类似*/
         var newItemStockCell=document.createElement('td');
         newItemStockCell.innerText='Stock';
         row.appendChild(newItemStockCell);
         /*创建第四列属性 和上面类似*/
         var newItemPriceCell=document.createElement('td');
         newItemPriceCell.innerText='UnitPrice';
         row.appendChild(newItemPriceCell);
         /*创建第五列属性 和上面类似*/
         var newItemPriceCell=document.createElement('td');
         newItemPriceCell.innerText='Actions';
         row.appendChild(newItemPriceCell);
         table.appendChild(thead)
         table.appendChild(tbody)
         addTable.appendChild(table)
    }
    addRow(clothingItem,categoryIndex){
        //创建行
    var row=document.createElement('tr');
    row.id=this.i++
    /*创建第一列属性*/
    // var IndexCell=document.createElement('td');
    // //向填充数据
    // IndexCell.innerText=clothingItem.Index;
    // row.appendChild(IndexCell);
    /*创建第二列属性*/
    //创建第二列
    var newItemNameCell=document.createElement('td');
    //填充数据
    newItemNameCell.innerText=clothingItem.Item;
    //加入行
    row.appendChild(newItemNameCell);
    /*创建第三列属性 和上面类似*/
    var newItemStockCell=document.createElement('td');
    newItemStockCell.innerText=clothingItem.Stock;
    row.appendChild(newItemStockCell);
    /*创建第四列属性 和上面类似*/
    var newItemPriceCell=document.createElement('td');
    newItemPriceCell.innerText=clothingItem.UnitPrice;
    row.appendChild(newItemPriceCell);
    //到这里，中的数据已经添加到表格里面了，下面为每行末尾添加编辑按钮
    /*创建第五列属性 编辑属性*/
    var deleteCell=document.createElement('td');
    //加入行
    row.appendChild(deleteCell);
    //创建一个编辑按钮控件
    var buttonCell=document.createElement('input');
    //setAttribute()方法创建或改变某个新属性，如果指定属性已存在，则只设置该值
    buttonCell.setAttribute('type','button');
    buttonCell.setAttribute('value','EDIT');
    //编辑功能
    buttonCell.onclick=function () {
    edit(categoryIndex,row.id)
    }
    //把编辑按钮控件加入第四列属性 编辑属性
    deleteCell.appendChild(buttonCell);
    //返回行的数据
    return row;
    }

}

/**
 * checkLSData function
 * Used to check if any data in LS exists at a specific key
 * @param {string} key LS Key to be used
 * @returns true or false representing if data exists at key in LS
 */
function checkLSData(key) {
    if (localStorage.getItem(key) != null) {
        return true;
    }
    return false;
}
/**
 * retrieveLSData function
 * Used to retrieve data from LS at a specific key. 
 * @param {string} key LS Key to be used
 * @returns data from LS in JS format
 */
function retrieveLSData(key) {
    let data = localStorage.getItem(key);
    try {
        data = JSON.parse(data);
    }
    catch (err) { }
    finally {
        return data;
    }
}
/**
 * updateLSData function
 * Used to store JS data in LS at a specific key
 * @param {string} key LS key to be used
 * @param {any} data data to be stored
 */
function updateLSData(key, data) {
    let json = JSON.stringify(data);
    localStorage.setItem(key, json);
}
// Global inventory variable
let inventory = new Inventory();
// Check if data available in LS before continuing
if (checkLSData(WAREHOUSE_KEY)) {
    // If data exists, retrieve it
    let data = retrieveLSData(WAREHOUSE_KEY);
    // Restore data into inventory
    inventory.fromData(data);
}

标签：appendChild,无标题,var,createElement,document,data,row
来源： https://blog.csdn.net/weixin_50006107/article/details/121876067