report-design-javascript/src/script/classes.ts

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
    const allCells = [];
    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("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);
          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 inputElement = document.getElementById(instanceOfCell.cellId);
        // };

        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;
  }
  setColspan(newColspan: number) {
    this.colspan = newColspan;
  }
}

export { Table, Cell };