Skip to content

Instantly share code, notes, and snippets.

@jbenner-radham
Last active December 23, 2015 16:59
Show Gist options
  • Save jbenner-radham/6665787 to your computer and use it in GitHub Desktop.
Save jbenner-radham/6665787 to your computer and use it in GitHub Desktop.
JavaScript automagic table script scratchpad. If you happen to venture upon this at random it probably doesn't work...
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
function makeTable(data, exclude) {
var tbl = document.createElement('table'),
thead = tbl.createTHead(),
thead_row = thead.insertRow(),
exclude = exclude || [];
if (Array.isArray(data) && data.length >= 1) {
for (var header in data[0]) {
// If the current header is in our excludeded list skip it.
if (exclude.indexOf(header) != -1) {
continue;
}
var thead_cell = document.createElement('th');
thead_cell.textContent = header;
thead_row.appendChild(thead_cell);
}
}
/**
* A new tbody will technically be created by insertRow() if need be but
* we're doing this just in case for the time being.
*/
var tbody = tbl.createTBody();
// We have to put the semi-colon before the [Array].forEach(){...} call
//;['hello'].forEach(function(i) {
// var cell = row.insertCell()
// cell.innerText = i
//})
/**
* @todo Make this not terribly redundant later...
*/
if (Array.isArray(data)) {
data.forEach(function(obj) {
var row = tbody.insertRow(-1);
for (var item in obj) {
// If the current header is in our excludeded list skip it.
if (exclude.indexOf(item) != -1) {
continue;
}
var cell = row.insertCell(-1);
cell.textContent = obj[item];
}
});
} else {
var row = tbody.insertRow(-1);
for (var item in obj) {
// If the current header is in our excludeded list skip it.
if (exclude.indexOf(item) != -1) {
continue;
}
var cell = row.insertCell(-1);
cell.textContent = obj[item];
}
}
return tbl;
}
function resetTable(tableDomHandle) {
tableDomHandle.deleteTHead();
while (tableDomHandle.tBodies[0]) {
tableDomHandle.removeChild(tableDomHandle.tBodies[0]);
}
/*
// Deletes all the rows, just deleting all of the tBodies is a little more
// fun though...
while (tableDomHandle.rows.length > 0) {
tableDomHandle.deleteRow(-1)
}
*/
}
/**
* Make a table out of a passed object automagically!(?) e.g.
*/
/*
var data = [
{
"head": "val",
"head2": "val2",
"head3": "val3"
},
{
"head": "val4",
"head2": "val5",
"head3": "val6"
},
{
"head": "val7",
"head2": "val8",
"head3": "val9"
}
]
*/
/**
* ^^ So each "row" is an object wrapped in an array "envelope" representing the table.
*/
/*
var tbl = makeTable(data)
document.body.appendChild(tbl)
*/
/*
HTMLTableElement.insertRow()
Returns an HTMLElement representing a new row of the table. It inserts it in the rows collection immediately before the <tr> element at the givent index position. If necessary a <tbody> is created. If the index is -1, the new row is appended to the collection. If the index is smaller than -1 or greater than the number of rows in the collection, a DOMException with the value IndexSizeError is raised.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment