<html>
<head>
<title>JavaScript</title>
<style>
td span {
font-size: 0.8em;
color: red;
padding: 5px;
cursor: pointer;
}
td:first-child {
width: 250px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="output"></div>
<input type="text" id="addItem">
<input type="button" id="addNew" value="Add Item">
<script>
let myList = ["bananas", "milk", "apples", "eggs", "cake"];
const btnAdd = document.querySelector("#addNew");
const output = document.querySelector(".output");
const newItem = document.querySelector("#addItem");
btnAdd.addEventListener("click", function () {
if (newItem.value) {
myList.push(newItem.value);
build();
newItem.value="";
}
})
window.onload = build;
function build() {
output.innerHTML = "<h2>My List</h2>";
const tbl = document.createElement("table");
for (let i = 0; i < myList.length; i++) {
const row = document.createElement("tr");
row.ind = i;
const cell1 = document.createElement("td");
cell1.innerHTML = myList[i];
row.appendChild(cell1);
const cell2 = document.createElement("td");
const span1 = document.createElement("span");
span1.innerText = "Delete";
span1.addEventListener("click", function () {
console.log(myList[i]);
//let temp = this.closest("tr").ind;
let itemOut = myList.splice(i, 1);
build();
})
cell2.appendChild(span1);
const span2 = document.createElement("span");
span2.innerText = "Edit";
span2.addEventListener("click", function () {
row.style.backgroundColor = "Yellow";
let tempEle = row.firstElementChild;
const newInput = document.createElement("input");
newInput.value = tempEle.innerText;
newInput.focus();
tempEle.innerHTML = "";
tempEle.appendChild(newInput);
newInput.addEventListener("blur", function () {
tempEle.innerHTML = newInput.value;
row.style.backgroundColor = "White";
myList[i] = newInput.value;
})
})
cell2.appendChild(span2);
row.appendChild(cell2);
tbl.appendChild(row);
}
output.appendChild(tbl);
}
</script>
</body>
</html>