class all

copyoftemplateclass.ts

@@ -0,0 +1,133 @@
+class Table {
+  rowLength: number;
+  columnLength: number;
+  selectedRow: string;
+  selectedCell: string;
+  instanceOfCells: any;
+  constructor(rowLength: number, columnLength: number, instanceOfCells: any) {
+    this.rowLength = rowLength;
+    this.columnLength = columnLength;
+    this.instanceOfCells = instanceOfCells;
+    this.selectedRow;
+    this.selectedCell;
+  }
+  render() {
+    // clear children elements
+    console.log("i am table render");
+    var cellIndex = -1;
+
+    var myNode = document.getElementById("table");
+    while (myNode.firstChild) {
+      myNode.removeChild(myNode.firstChild);
+    }
+
+    // loop through rowlength and collength
+    for (var i = 0; i < this.rowLength; i++) {
+      var table: HTMLTableElement = <HTMLTableElement>(
+        document.getElementById("table")
+      );
+      var row = table.insertRow(-1);
+
+      for (var j = 0; j < this.columnLength; j++) {
+        var letter = String.fromCharCode("A".charCodeAt(0) + j - 1);
+
+        const instanceOfCell = this.instanceOfCells[(cellIndex += 1)];
+        const cellElement = instanceOfCell.cellElement();
+        row.appendChild(cellElement);
+
+        cellElement.addEventListener("dblclick", () => {
+          this.showCellDetails(instanceOfCell);
+        });
+
+        cellElement.innerHTML = i && j ? instanceOfCell.cellId : i || letter;
+      }
+    }
+  }
+  showCellDetails(instanceOfCell) {
+    var cellInfoElement = document.getElementById("cellInfo");
+    while (cellInfoElement.firstChild) {
+      cellInfoElement.removeChild(cellInfoElement.firstChild);
+    }
+    const cellUlElement = document.createElement("ul");
+
+    for (const key in instanceOfCell) {
+      if (instanceOfCell.hasOwnProperty(key)) {
+        const cellLiElement = document.createElement("li");
+        const cellLableElement = document.createElement("label");
+        const cellInputElement = document.createElement("input");
+
+        cellLableElement.innerHTML = key;
+
+        cellInputElement.setAttribute("value", instanceOfCell[key]);
+        cellInputElement.setAttribute("name", key);
+        cellInputElement.setAttribute("class", "cell-detail");
+
+        cellLiElement.appendChild(cellLableElement);
+        cellLiElement.appendChild(cellInputElement);
+        cellUlElement.appendChild(cellLiElement);
+      }
+    }
+
+    const cellButtonElement = document.createElement("button");
+    cellButtonElement.innerHTML = "确定";
+    cellButtonElement.onclick = () => {
+      const inputElements = document.getElementsByClassName("cell-detail");
+      for (const key in instanceOfCell) {
+        // type script error---------------------------
+        for (const input of inputElements) {
+          if (key === input.name) {
+            instanceOfCell[key] = input.value;
+          }
+        }
+      }
+
+      this.render();
+    };
+    cellInfoElement.appendChild(cellUlElement);
+    cellInfoElement.appendChild(cellButtonElement);
+  }
+}
+
+class Cell {
+  cellId: string;
+  border: string;
+  color: string;
+  width: number;
+  colspan: string;
+  fontSize: string;
+  constructor(id) {
+    this.cellId = id;
+    this.border = "";
+    this.color = "";
+    this.width = 80;
+    this.colspan = "1";
+    this.fontSize = "12";
+  }
+
+  setColor(newColor: string) {
+    this.color = newColor;
+  }
+  setBorder(newBorder: string) {
+    this.border = newBorder;
+  }
+  setColspan(newColspan: string) {
+    this.colspan = newColspan;
+  }
+  setFontSize(newFontSize: string) {
+    this.fontSize = newFontSize;
+  }
+
+  cellElement() {
+    let tdElement = document.createElement("td");
+    tdElement.setAttribute("colspan", this.colspan);
+    tdElement.style.backgroundColor = this.color;
+    tdElement.style.width = this.width + "px";
+    tdElement.style.border = this.border + "px solid";
+    tdElement.style.fontSize = this.fontSize + "px";
+    tdElement.innerHTML = this.cellId;
+
+    return tdElement;
+  }
+}
+
+export { Table, Cell };