|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SpreadMaster - Excel Clone</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { DEFAULT: '#4F46E5', 50: '#F5F5FF', 500: '#4F46E5' }, |
|
|
secondary: { DEFAULT: '#10B981', 50: '#ECFDF5', 500: '#10B981' } |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.cell { position: relative; outline: none; } |
|
|
.cell:focus, .cell.selected { @apply ring-2 ring-primary-500 z-10; } |
|
|
.grid-container { display: grid; position: relative; scrollbar-width: thin; } |
|
|
.cell[data-formula="true"] { @apply font-mono bg-primary-50 text-primary-700; } |
|
|
.header-row { position: sticky; top: 0; z-index: 20; background: white; } |
|
|
.header-col { position: sticky; left: 0; z-index: 15; background: white; } |
|
|
.corner-header { position: sticky; top: 0; left: 0; z-index: 30; background: #f3f4f6; } |
|
|
.cell-resize-handle { |
|
|
position: absolute; bottom: 0; right: 0; width: 6px; height: 6px; |
|
|
background: #4F46E5; border: 1px solid white; cursor: se-resize; z-index: 5; |
|
|
display: none; |
|
|
} |
|
|
.cell.selected .cell-resize-handle { display: block; } |
|
|
.cell-content { |
|
|
min-height: 100%; width: 100%; padding: 4px; outline: none; |
|
|
background: transparent; resize: none; overflow: hidden; |
|
|
} |
|
|
.cell-content:focus { @apply bg-white; } |
|
|
.header-row, .header-col, .corner-header { |
|
|
@apply flex items-center justify-center font-medium text-gray-600 select-none border border-gray-300; |
|
|
} |
|
|
.formula-bar { background: white; border: 1px solid #e5e7eb; } |
|
|
.function-list { |
|
|
@apply absolute top-full left-0 bg-white border border-gray-300 rounded-lg shadow-lg mt-1 z-50 w-48 max-h-64 overflow-auto; |
|
|
} |
|
|
.function-item { @apply px-3 py-2 hover:bg-gray-100 cursor-pointer text-sm; } |
|
|
.function-item:hover { @apply bg-primary-50 text-primary-700; } |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-7xl"> |
|
|
|
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<div class="flex space-x-2"> |
|
|
<button onclick="saveData()" class="flex items-center space-x-2 px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg"> |
|
|
<i data-feather="save"></i><span>Save</span> |
|
|
</button> |
|
|
<button onclick="addColumn()" class="flex items-center space-x-2 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg"> |
|
|
<i data-feather="plus"></i><span>Add Column(Cột)</span> |
|
|
</button> |
|
|
<button onclick="addRow()" class="flex items-center space-x-2 px-4 py-2 bg-secondary-500 hover:bg-secondary-600 text-white rounded-lg"> |
|
|
<i data-feather="plus"></i><span>Add Row(Hàng)</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-4 bg-white rounded-lg shadow-sm border border-gray-200"> |
|
|
<div class="flex items-center p-2 border-b border-gray-200"> |
|
|
<div class="flex items-center space-x-2 flex-1"> |
|
|
<span class="text-xs font-medium text-gray-500">fx</span> |
|
|
<input type="text" id="cell-name" class="w-20 px-2 py-1 bg-gray-100 text-xs font-mono text-right border rounded" readonly> |
|
|
<button id="function-btn" class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded" onclick="toggleFunctionList()"> |
|
|
<i data-feather="chevron-down" class="w-3 h-3"></i> |
|
|
</button> |
|
|
</div> |
|
|
<input type="text" id="formula-bar" class="formula-bar flex-1 px-4 py-2 outline-none font-mono mx-2" |
|
|
placeholder="Enter formula or value" onkeydown="handleFormulaInput(event)" |
|
|
onfocus="syncFormulaBarWithCell()"> |
|
|
</div> |
|
|
<div id="function-list" class="function-list hidden"> |
|
|
<div class="px-3 py-2 border-b border-gray-200 font-medium text-sm">Common Functions</div> |
|
|
<div class="function-item" onclick="insertFunction('SUM')">SUM(range)</div> |
|
|
<div class="function-item" onclick="insertFunction('AVERAGE')">AVERAGE(range)</div> |
|
|
<div class="function-item" onclick="insertFunction('COUNT')">COUNT(range)</div> |
|
|
<div class="function-item" onclick="insertFunction('MAX')">MAX(range)</div> |
|
|
<div class="function-item" onclick="insertFunction('MIN')">MIN(range)</div> |
|
|
<div class="function-item" onclick="insertFunction('IF')">IF(condition, true, false)</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative"> |
|
|
<div id="grid" class="grid-container bg-gray-200 border border-gray-200 rounded-lg overflow-auto shadow-sm max-h-[600px]"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4 px-4 py-2 bg-white rounded-lg shadow-sm text-sm text-gray-500 flex justify-between"> |
|
|
<div id="status-message">Ready</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let numRows = 20, numCols = 10; |
|
|
const colLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; |
|
|
let selectedCell = null, data = {}, isDragging = false, startCell = null, dragEndCell = null; |
|
|
|
|
|
const functions = { |
|
|
SUM: (range) => getRangeValues(range).reduce((a, b) => a + (parseFloat(b) || 0), 0), |
|
|
AVERAGE: (range) => { |
|
|
const values = getRangeValues(range).filter(v => v !== '' && !isNaN(parseFloat(v))); |
|
|
return values.length ? functions.SUM(range) / values.length : 0; |
|
|
}, |
|
|
COUNT: (range) => getRangeValues(range).filter(v => v !== '' && !isNaN(parseFloat(v))).length, |
|
|
MAX: (range) => Math.max(...getRangeValues(range).map(v => parseFloat(v) || -Infinity)), |
|
|
MIN: (range) => Math.min(...getRangeValues(range).map(v => parseFloat(v) || Infinity)), |
|
|
IF: (condition, trueVal, falseVal) => evalCondition(condition) ? trueVal : falseVal |
|
|
}; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
loadData(); |
|
|
initGrid(); |
|
|
feather.replace(); |
|
|
}); |
|
|
|
|
|
function initGrid() { |
|
|
const grid = document.getElementById('grid'); |
|
|
grid.innerHTML = ''; |
|
|
grid.style.gridTemplateColumns = `50px repeat(${numCols}, minmax(120px, 1fr))`; |
|
|
grid.style.gridTemplateRows = `40px repeat(${numRows}, 40px)`; |
|
|
|
|
|
|
|
|
const corner = document.createElement('div'); |
|
|
corner.className = 'corner-header bg-gray-100'; |
|
|
corner.style.gridArea = '1 / 1'; |
|
|
grid.appendChild(corner); |
|
|
|
|
|
|
|
|
for (let col = 0; col < numCols; col++) { |
|
|
const header = document.createElement('div'); |
|
|
header.className = 'header-row bg-gray-100'; |
|
|
header.textContent = colLetters[col]; |
|
|
header.style.gridArea = '1 / ' + (col + 2); |
|
|
header.onclick = () => selectColumn(col); |
|
|
grid.appendChild(header); |
|
|
} |
|
|
|
|
|
|
|
|
for (let row = 1; row <= numRows; row++) { |
|
|
|
|
|
const rowHeader = document.createElement('div'); |
|
|
rowHeader.className = 'header-col bg-gray-100'; |
|
|
rowHeader.textContent = row; |
|
|
rowHeader.style.gridArea = (row + 1) + ' / 1'; |
|
|
rowHeader.onclick = () => selectRow(row); |
|
|
grid.appendChild(rowHeader); |
|
|
|
|
|
|
|
|
for (let col = 0; col < numCols; col++) { |
|
|
const cellId = getCellId(col, row); |
|
|
const cell = createCell(col, row, cellId); |
|
|
grid.appendChild(cell); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function createCell(col, row, cellId) { |
|
|
const cell = document.createElement('div'); |
|
|
cell.className = 'cell bg-white border border-gray-200 p-0 hover:bg-gray-50 cursor-cell'; |
|
|
cell.dataset.col = col; cell.dataset.row = row; cell.tabIndex = 0; cell.id = cellId; |
|
|
|
|
|
const handle = document.createElement('div'); |
|
|
handle.className = 'cell-resize-handle'; |
|
|
handle.onmousedown = (e) => startAutoFill(e, col, row); |
|
|
cell.appendChild(handle); |
|
|
|
|
|
const content = document.createElement('div'); |
|
|
content.className = 'cell-content'; content.contentEditable = true; |
|
|
content.oninput = () => updateCellValue(cell, col, row); |
|
|
content.onfocus = () => selectCell(cell, col, row); |
|
|
content.onkeydown = handleCellKeydown; |
|
|
|
|
|
|
|
|
if (data[cellId]) { |
|
|
content.textContent = data[cellId].displayValue || data[cellId].value; |
|
|
if (data[cellId].formula) cell.dataset.formula = 'true'; |
|
|
} |
|
|
|
|
|
cell.appendChild(content); |
|
|
cell.style.gridArea = (row + 1) + ' / ' + (col + 2); |
|
|
cell.onclick = (e) => { e.stopPropagation(); selectCell(cell, col, row); content.focus(); }; |
|
|
return cell; |
|
|
} |
|
|
|
|
|
function getCellId(col, row) { return colLetters[col] + row; } |
|
|
function getCellValue(cellId) { return data[cellId]?.value || '0'; } |
|
|
|
|
|
function selectCell(cell, col, row) { |
|
|
if (selectedCell) selectedCell.classList.remove('selected'); |
|
|
selectedCell = cell; cell.classList.add('selected'); |
|
|
document.getElementById('cell-name').value = getCellId(col, row); |
|
|
syncFormulaBarWithCell(); |
|
|
document.getElementById('status-message').textContent = `Editing ${getCellId(col, row)}`; |
|
|
} |
|
|
|
|
|
function syncFormulaBarWithCell() { |
|
|
if (!selectedCell) return; |
|
|
const col = parseInt(selectedCell.dataset.col), row = parseInt(selectedCell.dataset.row); |
|
|
const cellId = getCellId(col, row), formulaBar = document.getElementById('formula-bar'); |
|
|
formulaBar.value = data[cellId]?.formula ? '=' + data[cellId].formula : (data[cellId]?.value || ''); |
|
|
} |
|
|
|
|
|
function handleCellKeydown(e) { |
|
|
const cell = e.target.parentElement, col = parseInt(cell.dataset.col), row = parseInt(cell.dataset.row); |
|
|
if (e.key === 'F2') { e.preventDefault(); document.getElementById('formula-bar').focus(); return; } |
|
|
if (['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp'].includes(e.key)) { |
|
|
e.preventDefault(); |
|
|
let nextCol = col, nextRow = row; |
|
|
if (e.key === 'ArrowRight' && col < numCols - 1) nextCol++; |
|
|
else if (e.key === 'ArrowLeft' && col > 0) nextCol--; |
|
|
else if (e.key === 'ArrowDown' && row < numRows) nextRow++; |
|
|
else if (e.key === 'ArrowUp' && row > 1) nextRow--; |
|
|
const nextCell = document.getElementById(getCellId(nextCol, nextRow)); |
|
|
if (nextCell) nextCell.querySelector('.cell-content').focus(); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateCellValue(cell, col, row) { |
|
|
const content = cell.querySelector('.cell-content'), cellId = getCellId(col, row); |
|
|
const value = content.textContent; |
|
|
if (!data[cellId]) data[cellId] = { value: '', formula: '', displayValue: '' }; |
|
|
data[cellId].value = value; data[cellId].displayValue = value; |
|
|
} |
|
|
|
|
|
function handleFormulaInput(e) { |
|
|
if (e.key !== 'Enter' || !selectedCell) return; |
|
|
const formulaBar = e.target, input = formulaBar.value.trim(); |
|
|
const content = selectedCell.querySelector('.cell-content'); |
|
|
const col = parseInt(selectedCell.dataset.col), row = parseInt(selectedCell.dataset.row); |
|
|
const cellId = getCellId(col, row); |
|
|
|
|
|
if (input.toLowerCase().startsWith('del')) { |
|
|
handleDelete(input); formulaBar.value = ''; return; |
|
|
} |
|
|
|
|
|
let formula = '', result = ''; |
|
|
if (input.startsWith('=')) { |
|
|
formula = input.slice(1); |
|
|
result = evaluateFormula(formula, cellId); |
|
|
content.textContent = result; |
|
|
selectedCell.dataset.formula = 'true'; |
|
|
data[cellId] = { value: result, formula, displayValue: result }; |
|
|
recalculateDependents(cellId); |
|
|
} else { |
|
|
content.textContent = input; |
|
|
if (selectedCell.dataset.formula) delete selectedCell.dataset.formula; |
|
|
data[cellId] = { value: input, formula: '', displayValue: input }; |
|
|
} |
|
|
formulaBar.value = ''; content.focus(); |
|
|
} |
|
|
|
|
|
function evaluateFormula(formula, currentCellId) { |
|
|
try { |
|
|
|
|
|
formula = formula.replace(/[A-Z]\d+/g, (match) => { |
|
|
const col = colLetters.indexOf(match[0]), row = parseInt(match.slice(1)); |
|
|
const value = getCellValue(getCellId(col, row)); |
|
|
return isNaN(value) ? `"${value}"` : value; |
|
|
}); |
|
|
|
|
|
|
|
|
const funcMatch = formula.match(/^([A-Z]+)\((.+)\)$/i); |
|
|
if (funcMatch) { |
|
|
const funcName = funcMatch[1].toUpperCase(), argsStr = funcMatch[2]; |
|
|
const args = argsStr.split(',').map(arg => arg.trim().replace(/"/g, '')); |
|
|
if (functions[funcName]) { |
|
|
const firstArg = args[0]; |
|
|
if (firstArg.includes(':')) { |
|
|
return functions[funcName](firstArg); |
|
|
} else { |
|
|
return functions[funcName](...args.map(arg => isNaN(arg) ? arg : parseFloat(arg))); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return eval(formula); |
|
|
} catch { |
|
|
return '#ERROR!'; |
|
|
} |
|
|
} |
|
|
|
|
|
function getRangeValues(range) { |
|
|
const [start, end] = range.split(':'); |
|
|
const startCol = colLetters.indexOf(start[0]), startRow = parseInt(start.slice(1)); |
|
|
const endCol = colLetters.indexOf(end[0]), endRow = parseInt(end.slice(1)); |
|
|
const values = []; |
|
|
for (let c = Math.min(startCol, endCol); c <= Math.max(startCol, endCol); c++) { |
|
|
for (let r = Math.min(startRow, endRow); r <= Math.max(startRow, endRow); r++) { |
|
|
values.push(getCellValue(getCellId(c, r))); |
|
|
} |
|
|
} |
|
|
return values; |
|
|
} |
|
|
|
|
|
function evalCondition(condition) { |
|
|
try { return eval(condition); } catch { return false; } |
|
|
} |
|
|
|
|
|
function recalculateDependents(cellId) { |
|
|
Object.keys(data).forEach(id => { |
|
|
if (data[id].formula && data[id].formula.includes(cellId)) { |
|
|
const result = evaluateFormula(data[id].formula, id); |
|
|
const cell = document.getElementById(id); |
|
|
if (cell) { |
|
|
cell.querySelector('.cell-content').textContent = result; |
|
|
data[id].value = result; data[id].displayValue = result; |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function startAutoFill(e, col, row) { |
|
|
e.preventDefault(); e.stopPropagation(); |
|
|
isDragging = true; startCell = { col, row }; |
|
|
document.body.style.cursor = 'se-resize'; |
|
|
document.addEventListener('mousemove', handleAutoFillDrag); |
|
|
document.addEventListener('mouseup', endAutoFill); |
|
|
} |
|
|
|
|
|
function handleAutoFillDrag(e) { |
|
|
if (!isDragging) return; |
|
|
const grid = document.getElementById('grid'), rect = grid.getBoundingClientRect(); |
|
|
const x = e.clientX - rect.left, y = e.clientY - rect.top; |
|
|
let endCol = Math.floor((x - 50) / 120), endRow = Math.floor((y - 40) / 40) + 1; |
|
|
endCol = Math.max(0, Math.min(endCol, numCols - 1)); |
|
|
endRow = Math.max(1, Math.min(endRow, numRows)); |
|
|
dragEndCell = { col: endCol, row: endRow }; |
|
|
highlightRange(startCell.col, startCell.row, endCol, endRow); |
|
|
} |
|
|
|
|
|
function endAutoFill() { |
|
|
if (!isDragging || !startCell || !dragEndCell) return; |
|
|
isDragging = false; document.body.style.cursor = 'default'; |
|
|
performAutoFill(startCell.col, startCell.row, dragEndCell.col, dragEndCell.row); |
|
|
clearHighlights(); |
|
|
document.removeEventListener('mousemove', handleAutoFillDrag); |
|
|
document.removeEventListener('mouseup', endAutoFill); |
|
|
startCell = dragEndCell = null; |
|
|
} |
|
|
|
|
|
function highlightRange(sCol, sRow, eCol, eRow) { |
|
|
clearHighlights(); |
|
|
const minC = Math.min(sCol, eCol), maxC = Math.max(sCol, eCol); |
|
|
const minR = Math.min(sRow, eRow), maxR = Math.max(sRow, eRow); |
|
|
for (let c = minC; c <= maxC; c++) for (let r = minR; r <= maxR; r++) { |
|
|
const cell = document.getElementById(getCellId(c, r)); |
|
|
if (cell) cell.classList.add('bg-blue-100'); |
|
|
} |
|
|
} |
|
|
|
|
|
function clearHighlights() { |
|
|
document.querySelectorAll('.cell').forEach(cell => cell.classList.remove('bg-blue-100')); |
|
|
} |
|
|
|
|
|
function performAutoFill(sCol, sRow, eCol, eRow) { |
|
|
const startId = getCellId(sCol, sRow); |
|
|
const startData = data[startId] || { value: '', formula: '' }; |
|
|
const isFormula = !!startData.formula; |
|
|
const deltaCol = eCol - sCol, deltaRow = eRow - sRow; |
|
|
const dirCol = deltaCol !== 0 ? (deltaCol > 0 ? 1 : -1) : 0; |
|
|
const dirRow = deltaRow !== 0 ? (deltaRow > 0 ? 1 : -1) : 0; |
|
|
|
|
|
let step = 1; |
|
|
let currentCol = sCol + dirCol, currentRow = sRow + dirRow; |
|
|
while (dirCol ? (dirCol > 0 ? currentCol <= eCol : currentCol >= eCol) : true && |
|
|
dirRow ? (dirRow > 0 ? currentRow <= eRow : currentRow >= eRow) : true) { |
|
|
const cellId = getCellId(currentCol, currentRow); |
|
|
const cell = document.getElementById(cellId); |
|
|
if (cell) { |
|
|
let newValue, newFormula = ''; |
|
|
if (isFormula) { |
|
|
newFormula = adjustFormulaReferences(startData.formula, step * dirRow, step * dirCol); |
|
|
newValue = evaluateFormula(newFormula, cellId); |
|
|
} else { |
|
|
const startValue = parseFloat(startData.value); |
|
|
if (!isNaN(startValue)) { |
|
|
newValue = startValue + step * (dirRow || dirCol); |
|
|
} else { |
|
|
newValue = startData.value; |
|
|
} |
|
|
} |
|
|
cell.querySelector('.cell-content').textContent = newValue; |
|
|
data[cellId] = { value: newValue, formula: newFormula, displayValue: newValue }; |
|
|
if (newFormula) cell.dataset.formula = 'true'; |
|
|
} |
|
|
currentCol += dirCol; currentRow += dirRow; step++; |
|
|
} |
|
|
} |
|
|
|
|
|
function adjustFormulaReferences(formula, deltaRow, deltaCol) { |
|
|
return formula.replace(/([A-Z])(\d+)/g, (match, colLetter, rowStr) => { |
|
|
const col = colLetters.indexOf(colLetter); |
|
|
const row = parseInt(rowStr); |
|
|
const newCol = col + deltaCol; |
|
|
const newRow = row + deltaRow; |
|
|
return (newCol >= 0 ? colLetters[newCol] : colLetter) + newRow; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleFunctionList() { document.getElementById('function-list').classList.toggle('hidden'); } |
|
|
function insertFunction(name) { |
|
|
document.getElementById('formula-bar').value += `=${name}(`; |
|
|
document.getElementById('formula-bar').focus(); |
|
|
toggleFunctionList(); |
|
|
} |
|
|
|
|
|
function handleDelete(input) { |
|
|
const parts = input.toLowerCase().split(/\s+/); |
|
|
if (parts.length === 1) { |
|
|
selectedCell.querySelector('.cell-content').textContent = ''; |
|
|
delete data[selectedCell.id]; delete selectedCell.dataset.formula; |
|
|
} else if (parts.length === 2) { |
|
|
const target = parts[1].toUpperCase(); |
|
|
if (colLetters.includes(target[0])) deleteColumn(colLetters.indexOf(target[0])); |
|
|
else if (!isNaN(target)) deleteRow(parseInt(target)); |
|
|
} |
|
|
} |
|
|
|
|
|
function deleteColumn(col) { |
|
|
for (let r = 1; r <= numRows; r++) delete data[getCellId(col, r)]; |
|
|
for (let c = col; c < numCols - 1; c++) for (let r = 1; r <= numRows; r++) { |
|
|
const oldId = getCellId(c + 1, r), newId = getCellId(c, r); |
|
|
if (data[oldId]) { data[newId] = data[oldId]; delete data[oldId]; } |
|
|
} |
|
|
numCols--; initGrid(); |
|
|
} |
|
|
|
|
|
function deleteRow(row) { |
|
|
for (let c = 0; c < numCols; c++) delete data[getCellId(c, row)]; |
|
|
for (let r = row; r < numRows; r++) for (let c = 0; c < numCols; c++) { |
|
|
const oldId = getCellId(c, r + 1), newId = getCellId(c, r); |
|
|
if (data[oldId]) { data[newId] = data[oldId]; delete data[oldId]; } |
|
|
} |
|
|
numRows--; initGrid(); |
|
|
} |
|
|
|
|
|
function addColumn() { numCols++; initGrid(); } |
|
|
function addRow() { numRows++; initGrid(); } |
|
|
function saveData() { localStorage.setItem('spreadmaster', JSON.stringify({data, numRows, numCols})); } |
|
|
function loadData() { |
|
|
const saved = localStorage.getItem('spreadmaster'); |
|
|
if (saved) { |
|
|
const {data: d, numRows: r, numCols: c} = JSON.parse(saved); |
|
|
data = d || {}; numRows = r || 20; numCols = c || 10; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function selectColumn(col) { document.getElementById('status-message').textContent = `Column ${colLetters[col]}`; } |
|
|
function selectRow(row) { document.getElementById('status-message').textContent = `Row ${row}`; } |
|
|
</script> |
|
|
<script>feather.replace();</script> |
|
|
</body> |
|
|
</html> |
