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

// 表格类
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() {}
  addRowElement() {}
}
// 行类
class Row {
  createRowElement() {
    const rowElement = document.createElement("tr");
    return rowElement;
  }
}
// 单元类
class Cell {
  cellId: string;
  font: string;
  fontSize: string;
  fontColor: string;
  fontWeight: string;
  fontStyle: string;
  textDecoration: string; // underline or line throught
  border: string;
  backgroundColor: string;
  textAlign: string;
  constructor(id) {
    this.cellId = id;
    this.font = "Serif";
    this.fontSize = "12";
    this.fontColor = "black";
    this.fontWeight = "normal";
    this.fontStyle = "normal";
    this.textDecoration = "";
    this.border = "";
    this.backgroundColor = "";
    this.textAlign = "left";
  }

  CreateCellElement() {
    let tdElement = document.createElement("td");

    tdElement.style.fontFamily = this.font;
    tdElement.style.backgroundColor = this.backgroundColor;

    tdElement.style.border = this.border + "px solid";
    tdElement.style.fontSize = this.fontSize + "px";
    tdElement.style.color = this.fontColor;
    tdElement.style.fontWeight = this.fontWeight;
    tdElement.style.fontStyle = this.fontStyle;
    tdElement.style.textDecoration = this.textDecoration;
    tdElement.style.textAlign = this.textAlign;
    tdElement.innerHTML = "cell";

    return tdElement;
  }
}

export { Table, Cell };