Skip to content

Instantly share code, notes, and snippets.

@ahmeti

ahmeti/HtmlTableGenerator.html

Created June 15, 2022 17:52
Show Gist options
  • Save ahmeti/f433976aa3459724636c16af7f66b84f to your computer and use it in GitHub Desktop.
Save ahmeti/f433976aa3459724636c16af7f66b84f to your computer and use it in GitHub Desktop.
Download ZIP
HTML Table Generator (Especially Mac Mail)
Raw
HtmlTableGenerator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Generator (Especially Mac Mail)</title>
</head>
<body style="font-family: 'Helvetica', 'Arial', sans-serif;">
<h2>HTML Table Generator (Especially Mac Mail)</h2>
<div style="overflow: hidden">
<div style="width:50px; float: left;padding:10px;border-right: 1px solid #ddd;text-align: center;">
<div style="margin-bottom: 3px">Header Color</div>
<input type="color" id="header_bg_color" value="#eeeeee">
</div>
<div style="width:50px; float: left;padding:10px;border-right: 1px solid #ddd;text-align: center;">
<div style="margin-bottom: 3px">Border Color</div>
<input type="color" id="border_color" value="#dddddd">
</div>
<div style="width:55px; float: left;padding:10px;border-right: 1px solid #ddd;text-align: center;">
<div style="margin-bottom: 3px">Cell Padding</div>
<input type="number" id="cell_padding" value="3" style="width: 40px;height: 21px;" min="0">
</div>
<div style="width:55px; float: left;padding:10px;border-right: 1px solid #ddd;text-align: center;">
<div style="margin-top: 10px;margin-bottom: 11px;">Cols</div>
<input type="number" id="col_count" value="1" style="width: 40px;height: 21px;" min="0">
</div>
<div style="width:55px; float: left;padding:10px;border-right: 1px solid #ddd;text-align: center;">
<div style="margin-top: 10px;margin-bottom: 11px;">Rows</div>
<input type="number" id="row_count" value="1" style="width: 40px;height: 21px;" min="0">
</div>
</div>
<hr>
<br />
<br />
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>col1</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
</tr>
</tbody>
</table>
<br />
<br />
<script>
const TableGenerator = {
init: function () {
TableGenerator.headerBgColor();
TableGenerator.borderColor();
TableGenerator.cellPadding();
TableGenerator.colGenerate();
TableGenerator.rowGenerate();
// First Change
document.getElementById('header_bg_color').dispatchEvent(new Event('change'));
document.getElementById('border_color').dispatchEvent(new Event('change'));
document.getElementById('cell_padding').dispatchEvent(new Event('change'));
document.getElementById('col_count').dispatchEvent(new Event('change'));
document.getElementById('row_count').dispatchEvent(new Event('change'));
},
headerBgColor: function () {
const headerBgColor = document.getElementById('header_bg_color');
headerBgColor.addEventListener('change', (event) => {
const headerTr = document.querySelectorAll('table>thead>tr>th');
headerTr.forEach(e => {
e.style.backgroundColor = event.target.value; // bg-color
});
});
},
borderColor: function () {
const borderColor = document.getElementById('border_color');
borderColor.addEventListener('change', (event) => {
const headerTr = document.querySelectorAll('table>thead>tr>th');
headerTr.forEach(e => {
e.style.border = '1px solid ' + event.target.value; // border-color
});
const bodyTr = document.querySelectorAll('table>tbody>tr>td');
bodyTr.forEach(e => {
e.style.border = '1px solid ' + event.target.value; // border-color
});
});
},
cellPadding: function () {
const cellPadding = document.getElementById('cell_padding');
cellPadding.addEventListener('change', (event) => {
const headerTr = document.querySelectorAll('table>thead>tr>th');
headerTr.forEach(e => {
e.style.padding = (Number(event.target.value) || 0) +
'px'; // cell-padding
});
const bodyTr = document.querySelectorAll('table>tbody>tr>td');
bodyTr.forEach(e => {
e.style.padding = (Number(event.target.value) || 0) +
'px'; // cell-padding
});
});
},
colGenerate: function () {
let colCount = document.getElementById('col_count');
colCount.addEventListener('change', (event) => {
const colNewCount = Number(colCount.value) > 0 ? Number(colCount.value) : 1;
const headFirstTr = document.querySelector('table>thead>tr');
const thItems = document.querySelectorAll('table>thead>tr>th');
const tdItems = document.querySelectorAll('table>tbody>tr>td');
if (colNewCount < thItems.length) {
thItems.forEach((item, i) => {
if (i + 1 > colNewCount) {
item.remove();
}
});
tdItems.forEach((item, i) => {
if (i + 1 > colNewCount) {
item.remove();
}
});
} else if (colNewCount > thItems.length) {
// Add
const addCount = colNewCount - thItems.length
for (i = 0; i < addCount; i++) {
document.querySelector('table>thead>tr').innerHTML += thItems[0].outerHTML
.replaceAll('col1', 'col' + (thItems.length + 1 + i));
document.querySelectorAll('table>tbody>tr').forEach((item) => {
item.innerHTML += tdItems[0].outerHTML.replaceAll('row1',
'row' + (1 + i));
});
}
}
});
},
rowGenerate: function () {
let rowCount = document.getElementById('row_count');
rowCount.addEventListener('change', (event) => {
const trItems = document.querySelectorAll('table>tbody>tr');
const trNewCount = Number(rowCount.value) > 0 ? Number(rowCount.value) : 1;
if (trNewCount < trItems.length) {
// Delete
trItems.forEach((item, i) => {
if (i + 1 > trNewCount) {
item.remove();
}
});
} else if (trNewCount > trItems.length) {
// Add
const trRows = trNewCount - trItems.length
for (i = 0; i < trRows; i++) {
document.querySelector('table>tbody').innerHTML +=
trItems[0].outerHTML.replaceAll('row1', 'row' + (trItems.length + 1 +
i));
}
}
});
},
};
TableGenerator.init();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment