var obj = [{
Firstname: "Bob",
Lastname: "Mayer",
Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6e636e4c616d75697e226f6361">[email protected]</a>",
Number: "123456789"
}, {
Firstname: "Steven",
Lastname: "Spil",
Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="374443524152597744475e5b5b1954585a">[email protected]</a>",
Number: "987654321"
}, {
Firstname: "Paul",
Lastname: "Taucker",
Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acdccdd9c0ecd8cdcfc782cfc3c1">[email protected]</a>",
Number: "578954321"
}, {
Firstname: "computer",
Lastname: "Tech",
Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50333f3d2010243533387e333f3d">[email protected]</a>",
Number: "418741876"
}, {
Firstname: "User",
Lastname: "Interface",
Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9aefe9ffe8daf3f4eeffe8b4f3f4">[email protected]</a>",
Number: "949796928"
}];
var editCounter = 0;
var table = document.createElement('table');
table.id = "table";
var headcell = document.createElement('th');
var cell = document.createElement('td');
var input = document.createElement('input');
var tableContainer = document.createElement('div');
document.body.appendChild(tableContainer);
var filter = document.createElement('input');
filter.type = "text";
filter.placeholder = "Filter";
filter.id = "tabFilter";
filter.setAttribute("onkeyup", "filterTable()");
tableContainer.appendChild(filter);
var formContainer = document.createElement('form');
formContainer.id = "details";
document.body.appendChild(formContainer);
function createTable() {
tableContainer.appendChild(table);
var row = document.createElement('tr');
table.appendChild(row);
headcell = document.createElement('th');
row.appendChild(headcell);
headcell.innerHTML = "Select";
headcell = document.createElement('th');
row.appendChild(headcell);
headcell.innerHTML = "Sl.No";
Object.keys(obj[0]).forEach(function(val) {
headcell = document.createElement('th');
row.appendChild(headcell);
headcell.innerHTML = val;
});
for (var i = 0; i < obj.length; i++) {
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnEdit = document.createElement('input');
btnEdit.type = "button";
btnEdit.value = "Edit";
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkBox";
var row = document.createElement("tr");
table.appendChild(row);
var cell = document.createElement("td");
row.appendChild(cell);
cell.appendChild(checkbox);
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = i;
for (key in obj[i]) {
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = obj[i][key];
}
}
return true;
}
createTable();
function filterTable() {
var q = document.getElementById("tabFilter");
var v = q.value.toLowerCase();
var rows = document.getElementsByTagName("tr");
var on = 0;
for (var i = 0; i < rows.length; i++) {
var fullname = rows[i].getElementsByTagName("td");
if (fullname.length) {
fullname = fullname[2].textContent.toLowerCase();
if (fullname && v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1)) {
rows[i].style.display = "";
on++;
} else {
rows[i].style.display = "none";
}
}
}
}
* {
font-family: 'verdana'
}
table {
margin-bottom: 15px
}
input {
margin: 5px
}
th,
td {
border: 1px solid #ccc;
font: 13px'verdana';
padding: 5px
}
th {
font-weight: bold
}
table [type="text"],
table [type="email"],
table [type="number"] {
display: block;
width: 90px
}
[value="Delete"],
[value="Copy"] {
display: block
}