cell and cellinfo input linked

src/script/classes.ts

@@ -3,19 +3,24 @@ class Table {
   columnLength: number;
   selectedRow: string;
   selectedCell: string;
-  constructor(rowLength: number, columnLength: number) {
+  instanceOfCells: any;
+  constructor(rowLength: number, columnLength: number, instanceOfCells: any) {
     this.rowLength = rowLength;
     this.columnLength = columnLength;
+    this.instanceOfCells = instanceOfCells;
     this.selectedRow;
     this.selectedCell;
   }
-  render(cell) {
+  render() {
     // clear children elements
-    const allCells = [];
+    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 collentgh
     for (var i = 0; i < this.rowLength; i++) {
       var table: HTMLTableElement = <HTMLTableElement>(
@@ -25,19 +30,16 @@ class Table {
 
       for (var j = 0; j < this.columnLength; j++) {
         var letter = String.fromCharCode("A".charCodeAt(0) + j - 1);
-        const instanceOfCell = new cell("cell" + letter + i);
-        const newCell = row.insertCell(-1);
-        newCell.id = "cell" + letter + i;
-        // allCells.push(instanceOfCell);
-        newCell.addEventListener("click", () => {
-          instanceOfCell.setColspan(5);
-          console.log(instanceOfCell);
+
+        const instanceOfCell = this.instanceOfCells[(cellIndex += 1)];
+        const cellElement = instanceOfCell.cellElement();
+        row.appendChild(cellElement);
+
+        cellElement.addEventListener("dblclick", () => {
           this.showCellDetails(instanceOfCell);
         });
 
-        i && j
-          ? ((newCell.colSpan = cell.colspan), (newCell.innerHTML = letter + i))
-          : (newCell.innerHTML = i.toString() || letter);
+        cellElement.innerHTML = i && j ? instanceOfCell.cellId : i || letter;
       }
     }
   }
@@ -53,50 +55,73 @@ class Table {
         const cellLiElement = document.createElement("li");
         const cellLableElement = document.createElement("label");
         const cellInputElement = document.createElement("input");
-        cellInputElement.setAttribute("id", instanceOfCell.cellId);
-        const cellButtonElement = document.createElement("button");
-        cellButtonElement.innerHTML = "确定";
-        // cellButtonElement.onclick = function() {
-        //   const inputElement = document.getElementById(instanceOfCell.cellId);
-        // };
 
         cellLableElement.innerHTML = key;
+
         cellInputElement.setAttribute("value", instanceOfCell[key]);
+        cellInputElement.setAttribute("name", key);
+        cellInputElement.setAttribute("class", "cell-detail");
 
         cellLiElement.appendChild(cellLableElement);
         cellLiElement.appendChild(cellInputElement);
-        cellLiElement.appendChild(cellButtonElement);
         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);
   }
-  changeCellDetails(instanceOfCell) {}
 }
+
 class Cell {
   cellId: string;
-  border: number;
+  border: string;
   color: string;
   width: number;
-  colspan: number;
-
+  colspan: string;
   constructor(id) {
     this.cellId = id;
-    this.border = 1;
-    this.color = "grey";
+    this.border = "";
+    this.color = "";
     this.width = 80;
-    this.colspan = 1;
+    this.colspan = "1";
   }
 
   setColor(newColor: string) {
     this.color = newColor;
   }
-  setBorder(newBorder: number) {
+  setBorder(newBorder: string) {
     this.border = newBorder;
   }
-  setColspan(newColspan: number) {
+  setColspan(newColspan: string) {
     this.colspan = newColspan;
   }
+  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.innerHTML = this.cellId;
+
+    return tdElement;
+  }
 }
 
 export { Table, Cell };

src/script/main.ts

@@ -1,6 +1,7 @@
 import { Table, Cell } from "./classes";
 
 const submit = document.getElementById("submitRowCol");
+const instanceOfCells = [];
 
 submit.addEventListener(
   "click",
@@ -9,8 +10,13 @@ submit.addEventListener(
     const totalRow = Number(rowElement.value);
     const colElement = <HTMLInputElement>document.getElementById("totalCol");
     const totalCol = Number(colElement.value);
-    const table = new Table(totalRow, totalCol);
-    table.render(Cell);
+
+    for (let i = 0; i < totalRow * totalCol; i++) {
+      const newCell = new Cell(i.toString());
+      instanceOfCells.push(newCell);
+    }
+    const table = new Table(totalRow, totalCol, instanceOfCells);
+    table.render();
   },
   false
 );