Skip to content

Instantly share code, notes, and snippets.

@samarulrajt

samarulrajt/CRUD

Last active March 2, 2018 08:50
Show Gist options
  • Save samarulrajt/2f7aaf9a325ed350295dbaa6e3b56720 to your computer and use it in GitHub Desktop.
Save samarulrajt/2f7aaf9a325ed350295dbaa6e3b56720 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CRUD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div style="text-align: center;">Enter name : <input type="text" name="nameText" id="nameText" value="" /><button type="button" id="save-btn">Save</button>
<table align='center' cellspacing=2 cellpadding=5 id="testData" border=1>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var testData = {
data:
[
{ id: 1, name: 'SAM' },
{ id: 2, name: 'ARUL' },
{ id: 3, name: 'RAJ' },
{ id: 4, name: 'Test' }
],
selector: 'testData'
};
var jCrud = (function () {
return {
table: document.getElementById(testData.selector),
data: testData.data,
init: function () {
this.list();
},
rowsCount: function () {
return this.table.rows.length;
},
list: function () {
var self = this;
if (this.data.length > 0) {
var t = this.table;
this.data.forEach(function (value, i) {
var row = t.insertRow(1);
row.id = 'row_' + i;
cell0 = row.insertCell(0);
cell1 = row.insertCell(1);
cell0.innerHTML = value.name;
cell0.id = "tr_td_" + i;
var editBtnText = document.createTextNode("Edit");
var deleteBtnText = document.createTextNode("Delete");
button0 = document.createElement('button'); button0.appendChild(editBtnText); button0.id = "e_btn_" + i; button0.onclick = function () { self.edit(i) }
button2 = document.createElement('button'); button2.appendChild(deleteBtnText); button2.id = "d_btn_" + i; button2.onclick = function () { self.delete(row.id); }
cell1.appendChild(button0);
cell1.appendChild(button2);
});
}
},
add: function (nameText) {
insData = { id: this.data.length + 1, name: nameText }
this.data.push(insData);
this.table.innerHTML = "<tr><th>Name</th><th>Action</th></tr>";
this.list();
document.getElementById('nameText').value = '';
},
edit: function (i) {
document.getElementById('nameText').value = document.getElementById('tr_td_' + i).innerHTML;
document.getElementById('save-btn').setAttribute('data-rowid', 'tr_td_' + i);
},
save: function (rowtd) {
nameText = document.getElementById('nameText').value;
rowText = document.getElementById(rowtd);
if (nameText != '' && rowText != '' && rowText != null) {
document.getElementById(rowtd).innerHTML = document.getElementById('nameText').value;
document.getElementById('nameText').value = '';
document.getElementById('save-btn').removeAttribute('data-rowid');
} else {
this.add(nameText);
}
},
delete: function (row_id) {
if (confirm("Are you sure ?")) {
var removeIndex = row_id.split('_')
this.data.splice(removeIndex[1], 1);
this.table.rows.namedItem(row_id).remove();
document.getElementById('nameText').value = '';
document.getElementById('save-btn').removeAttribute('data-rowid');
}
}
};
})();
jCrud.init();
document.getElementById('save-btn').addEventListener('click', function (e) {
nameText = document.getElementById('nameText').value;
if (nameText != '' && typeof nameText != null && this.getAttribute('data-rowid')) {
jCrud.save(this.getAttribute('data-rowid'));
} else {
jCrud.add(nameText);
}
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment