Skip to content

Instantly share code, notes, and snippets.

@rubenrivera
Last active October 17, 2021 19:15
Show Gist options
  • Save rubenrivera/66d3d2e68f7594b108b964a8a2eaebb5 to your computer and use it in GitHub Desktop.
Save rubenrivera/66d3d2e68f7594b108b964a8a2eaebb5 to your computer and use it in GitHub Desktop.
Simple Excel / Google Sheets like HTML table (no column/row headers)
{
"timeZone": "America/Matamoros",
"dependencies": {},
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8",
"webapp": {
"executeAs": "USER_DEPLOYING",
"access": "MYSELF"
}
}
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index')
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
table,td {
border: 1px solid silver;
}
input {
border: none;
margin: 1px;
}
</style>
</head>
<body>
<div id="table"></div>
<script>
/** Number of rows */
const r = 3;
/** Number of columns */
const c = 3;
/**
* When the page is loaded creates a table having editable cells. Each time
* a cell is edited the cell row and column (1 based index) coordinates and the
* cell value will be logged to the web browser console.
*
*/
(() => {
let table = `<table cellpadding="0"; cellspacing="0">`
for(let i = 1; i <= r; i++){
let row = '<tr>';
for(let j = 1; j <= c; j++){
row += `<td><input type="text" class="cell" data-row="${i}" data-column="${j}"/></td>`
}
row += '</tr>';
table += row;
}
table += `</table>`;
const element = document.getElementById('table');
element.innerHTML = table;
element.querySelectorAll(".cell").forEach(cell => cell.addEventListener("change",onEdit));
})(r,c);
/**
* Run every time a cell is edited
*/
function onEdit(){
console.log(` r: ${this.dataset.row}, c: ${this.dataset.column}, v: ${this.value}`)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment