55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
let table = document.getElementById('bagua-table');
|
|
|
|
let editingTd;
|
|
|
|
table.onclick = function(event) {
|
|
|
|
// 3 possible targets
|
|
let target = event.target.closest('.edit-cancel,.edit-ok,td');
|
|
|
|
if (!table.contains(target)) return;
|
|
|
|
if (target.className == 'edit-cancel') {
|
|
finishTdEdit(editingTd.elem, false);
|
|
} else if (target.className == 'edit-ok') {
|
|
finishTdEdit(editingTd.elem, true);
|
|
} else if (target.nodeName == 'TD') {
|
|
if (editingTd) return; // already editing
|
|
|
|
makeTdEditable(target);
|
|
}
|
|
|
|
};
|
|
|
|
function makeTdEditable(td) {
|
|
editingTd = {
|
|
elem: td,
|
|
data: td.innerHTML
|
|
};
|
|
|
|
td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside
|
|
|
|
let textArea = document.createElement('textarea');
|
|
textArea.style.width = td.clientWidth + 'px';
|
|
textArea.style.height = td.clientHeight + 'px';
|
|
textArea.className = 'edit-area';
|
|
|
|
textArea.value = td.innerHTML;
|
|
td.innerHTML = '';
|
|
td.appendChild(textArea);
|
|
textArea.focus();
|
|
|
|
td.insertAdjacentHTML("beforeEnd",
|
|
'<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>'
|
|
);
|
|
}
|
|
|
|
function finishTdEdit(td, isOk) {
|
|
if (isOk) {
|
|
td.innerHTML = td.firstChild.value;
|
|
} else {
|
|
td.innerHTML = editingTd.data;
|
|
}
|
|
td.classList.remove('edit-td');
|
|
editingTd = null;
|
|
}
|