first commit

src/script/classes.ts

@@ -0,0 +1,103 @@
+class Table {
+  rowLength: number;
+  columnLength: number;
+  selectedRow: string;
+  selectedCell: string;
+  constructor(rowLength: number, columnLength: number) {
+    this.rowLength = rowLength;
+    this.columnLength = columnLength;
+    this.selectedRow;
+    this.selectedCell;
+  }
+  render(cell) {
+    // clear children elements
+    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>(
+        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 = new cell(letter + i);
+        const newCell = row.insertCell(-1);
+
+        newCell.addEventListener("click", () => {
+          console.log(instanceOfCell);
+          this.showCellDetails(instanceOfCell);
+        });
+
+        i && j
+          ? ((newCell.colSpan = cell.colspan), (newCell.innerHTML = letter + i))
+          : (newCell.innerHTML = i.toString() || 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");
+        cellInputElement.setAttribute("id", instanceOfCell.cellId);
+        const cellButtonElement = document.createElement("button");
+        cellButtonElement.innerHTML = "确定";
+        // cellButtonElement.onclick = function() {
+        //   const test: HTMLTableElement = <HTMLTableElement>(
+        //     document.getElementById(instanceOfCell.cellId)
+        //   );
+        //   instanceOfCell[key] = test.value;
+        //   console.log(instanceOfCell);
+        // };
+
+        cellLableElement.innerHTML = key;
+        cellInputElement.setAttribute("value", instanceOfCell[key]);
+
+        cellLiElement.appendChild(cellLableElement);
+        cellLiElement.appendChild(cellInputElement);
+        cellLiElement.appendChild(cellButtonElement);
+        cellUlElement.appendChild(cellLiElement);
+      }
+    }
+    cellInfoElement.appendChild(cellUlElement);
+  }
+  changeCellDetails(instanceOfCell) {}
+}
+class Cell {
+  cellId: string;
+  border: number;
+  color: string;
+  width: number;
+  colspan: number;
+
+  constructor(id) {
+    this.cellId = id;
+    this.border = 1;
+    this.color = "grey";
+    this.width = 80;
+    this.colspan = 1;
+  }
+
+  setColor(newColor: string) {
+    this.color = newColor;
+  }
+  setBorder(newBorder: number) {
+    this.border = newBorder;
+  }
+  setWidth(newWidth: number) {
+    this.width = newWidth;
+  }
+}
+
+export { Table, Cell };

src/script/main.ts

@@ -0,0 +1,16 @@
+import { Table, Cell } from "./classes";
+
+const submit = document.getElementById("submitRowCol");
+
+submit.addEventListener(
+  "click",
+  function initialTable() {
+    const rowElement = <HTMLInputElement>document.getElementById("totalRow");
+    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);
+  },
+  false
+);

src/style/style.css

@@ -0,0 +1,58 @@
+#app {
+  display: flex;
+}
+#table {
+  width: 80%;
+}
+.sidebar {
+  width: 20%;
+  height: 100vh;
+  background-color: lightgray;
+}
+
+li {
+  list-style: none;
+}
+li:before {
+  content: "✓ ";
+}
+
+input {
+  border: none;
+  width: 80px;
+  font-size: 14px;
+  padding: 2px;
+}
+
+td:hover {
+  background-color: #eee;
+}
+
+td:focus {
+  background-color: #ccf;
+}
+
+input:not(:focus) {
+  text-align: right;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+td {
+  border: 1px solid #999;
+  padding: 0;
+}
+
+tr:first-child td,
+td:first-child {
+  background-color: #ccc;
+  padding: 1px 3px;
+  font-weight: bold;
+  text-align: center;
+}
+
+footer {
+  font-size: 80%;
+}