104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
|
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 };
|