134 lines
3.8 KiB
TypeScript
134 lines
3.8 KiB
TypeScript
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 };
|