I am new to working in javascript, I am work Dom element and create a demo of crud with the table.
CRUDCODE:
<html>
<head>
<style type="text/css">
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<input type="text" id="name"><br /><br />
<input type="text" id="age"><br /><br />
<input type="text" id="email"><br /><br />
<input type="button" value="addNew" id="addNew"><br />
<div id="output"></div>
<script>
let rows = [{
name: "John",
age: 20,
email: "abc@gmail.com"
}, {
name: "Jack",
age: 50,
email: "pqr@gmail.com"
}, {
name: "Son",
age: 45,
email: "xyz@gmail.com"
}];
window.onload = building();
let addNew = document.getElementById("addNew");
addNew.onclick = function () {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let email = document.getElementById("email").value;
rows.push({
name,
age,
email
});
console.log(rows);
building();
}
function building() {
let html = "<h1>student-Info</h1><table align='center'>";
for (let i = 0; i < rows.length; i++) {
html += '<tr id="id' + i + '"data-row="' + i + '">';
html += "<td>" + rows[i].name + "</td>";
html += "<td>" + rows[i].age + "</td>";
html += "<td>" + rows[i].email + "</td>";
html += "<td><a href='#' data-action='delete'>DELETE</a></td>";
html += "<td><a href='#' data-action='edit'>Edit</a></td>";
html += '</tr>';
}
html += "</table>";
document.querySelector('#output').innerHTML = html;
let deleted = document.querySelectorAll('[data-action="delete"]');
for (let i = 0; i < deleted.length; i++) {
deleted[i].addEventListener('click', function () {
event.preventDefault();
let ival = this.closest('[data-row]').getAttribute('data-row');
let r = rows.splice(ival, 1);
building();
console.log(r);
})
}
let edited = document.querySelectorAll('[data-action="edit"]');
console.log(edited);
for (let i = 0; i < edited.length; i++) {
edited[i].addEventListener('click', function () {
event.preventDefault();
let row = this.closest('[data-row]');
let rid = row.getAttribute('data-row');
let td = row.firstElementChild;
let input = document.createElement("input");
input.type = "text";
input.value = td.innerText;
td.innerHTML = "";
td.appendChild(input);
input.onblur = function () {
td.removeChild(input);
td.innerHTML = input.value;
rows[rid] = input.value;
}
})
}
}
</script>
</html>
I am getting all array data in loop "table" but when I click on edit I am not able to convert all "td" element in "input" field,only first "" the element will be converted.
Anybody have any idea please help to sort it out. Thanks
You apply the input field for firstElement in your code, but you need to get all the editable table field and update it like this
<html>
<head>
<style type="text/css">
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<input type="text" id="name"><br /><br />
<input type="text" id="age"><br /><br />
<input type="text" id="email"><br /><br />
<input type="button" value="addNew" id="addNew"><br />
<div id="output"></div>
<script>
let rows = [{
name: "John",
age: 20,
email: "abc@gmail.com"
}, {
name: "Jack",
age: 50,
email: "pqr@gmail.com"
}, {
name: "Son",
age: 45,
email: "xyz@gmail.com"
}];
window.onload = building();
let addNew = document.getElementById("addNew");
addNew.onclick = function () {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let email = document.getElementById("email").value;
rows.push({
name,
age,
email
});
building();
}
function building() {
let html = "<h1>student-Info</h1><table align='center'>";
for (let i = 0; i < rows.length; i++) {
html += '<tr id="id' + i + '"data-row="' + i + '">';
html += "<td data-col='name'>" + rows[i].name + "</td>";
html += "<td data-col='age'>" + rows[i].age + "</td>";
html += "<td data-col='email'>" + rows[i].email + "</td>";
html += "<td><a href='#' data-action='edit'>Edit</a></td>";
html += "<td><a href='#' data-action='delete'>DELETE</a></td>";
html += '</tr>';
}
html += "</table>";
document.querySelector('#output').innerHTML = html;
let deleted = document.querySelectorAll('[data-action="delete"]');
for (let i = 0; i < deleted.length; i++) {
deleted[i].addEventListener('click', function () {
event.preventDefault();
this.closest('[data-row]').parentNode.removeChild(this.closest('[data-row]'));
})
}
let edited = document.querySelectorAll('[data-action="edit"]');
for (let i = 0; i < edited.length; i++) {
edited[i].addEventListener('click', function () {
event.preventDefault();
let row = this.closest('[data-row]');
let rid = row.getAttribute('data-row');
const tdList = row.querySelectorAll('td[data-col]');
[...tdList].forEach(td => {
let input = document.createElement("input");
input.type = "text";
input.value = td.innerText;
td.innerHTML = "";
td.appendChild(input);
input.onblur = function () {
td.removeChild(input);
td.innerHTML = input.value;
rows[rid][td.dataset.col] = input.value;
}
})
})
}
}
</script>
</html>