How to Create HTML Table with Column Edit and Remove Rows Using JavaScript
In this Javascript tutorial, we will see how to use JavaScript to edit and remove html table row.
This code allows users to do an inline edit for table row, and delete row.
It uses Font Awesome icons for the edit, delete, and save actions and JavaScript to handle the interactivity.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title> Table - Edit / Remove Row </title>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous">
<style>
*{box-sizing: border-box}
body{
margin: 0;
padding: 0;
font-family: sans-serif, Arial, Helvetica;
background-color: #f8f8f8;
}
table{
width: 100%;
border-collapse: collapse;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
table th, table td{
padding:12px 15px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
table th{background-color: #1abc9c; color: #fff; text-transform: uppercase; }
table td{font-size: 14px;}
table tr:last-child td{border-bottom: none}
table tr:hover{background-color: #f4f4f4;}
.fa{font-size: 18px; margin-right: 10px;}
.fa-edit:hover,
.fa-trash:hover,
.fa-save:hover{
color: #2c3e50;
}
</style>
</head>
<body>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>City</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John 11</td>
<td>100</td>
<td>Male</td>
<td>Mars</td>
<td>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
<i class="fas fa-save" style="display: none"></i>
</td>
</tr>
<tr>
<td>John 22</td>
<td>100</td>
<td>Male</td>
<td>Mars</td>
<td>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
<i class="fas fa-save" style="display: none"></i>
</td>
</tr>
<tr>
<td>John 33</td>
<td>100</td>
<td>Male</td>
<td>Mars</td>
<td>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
<i class="fas fa-save" style="display: none"></i>
</td>
</tr>
<tr>
<td>John 44</td>
<td>100</td>
<td>Male</td>
<td>Mars</td>
<td>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
<i class="fas fa-save" style="display: none"></i>
</td>
</tr>
<tr>
<td>John 55</td>
<td>100</td>
<td>Male</td>
<td>Mars</td>
<td>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
<i class="fas fa-save" style="display: none"></i>
</td>
</tr>
<tr>
<td>John 66</td>
<td>100</td>
<td>Male</td>
<td>Mars</td>
<td>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
<i class="fas fa-save" style="display: none"></i>
</td>
</tr>
</tbody>
</table>
<script>
const trashIcons = document.querySelectorAll(".fa-trash");
trashIcons.forEach(icon => {
icon.addEventListener("click", function(){
const row = this.parentNode.parentNode;
row.remove();
});
});
const editIcons = document.querySelectorAll(".fa-edit");
editIcons.forEach(icon => {
icon.addEventListener("click", function(){
// get the current row
const row = this.parentNode.parentNode;
// get the cells in the current row
const cells = row.querySelectorAll("td");
// loop through the cells and replace the text with input fields
cells.forEach((cell, index) => {
if(index !== cells.length-1)
{
const input = document.createElement("input");
input.value = cell.textContent;
cell.textContent = "";
cell.appendChild(input);
}
});
// hide the edit icon and show the save icon
this.style.display = "none";
const saveIcon = this.parentNode.querySelector(".fa-save");
saveIcon.style.display = "inline-block";
});
});
const saveIcons = document.querySelectorAll(".fa-save");
saveIcons.forEach(icon => {
icon.addEventListener("click", function(){
// get the current row
const row = this.parentNode.parentNode;
// get the cells in the current row
const cells = row.querySelectorAll("td");
// loop through the cells and replace the input fields with their values
cells.forEach((cell, index) => {
if(index !== cells.length - 1){
const input = cell.querySelector("input");
cell.textContent = input.value;
}
});
// hide the save icon and show the edit icon
this.style.display = "none";
const editIcon = this.parentNode.querySelector(".fa-edit");
editIcon.style.display = "inline-block";
});
});
</script>
</body>
</html>
Code Explanation:
this JavaScript code, allows users to edit and remove html table row using javascript with font awesome icons.
This JavaScript code performs the following actions:
1 - It first selects all elements with the class "fa-trash" (the delete icons) and adds a click event listener to each of them, and when a delete icon is clicked, the associated row is removed from the table..
2 - It adds click event listeners to all "fa-edit" icons, transforming rows into editable forms when clicked. Text in cells becomes input fields, edit icons are hidden, and save icons allow data to be saved.
3 - It attaches a click event listener to all elements with the "fa-save" class. When a save icon is clicked, it restores the row to its non-editable state, replacing input fields with their values, hides the save icon, and shows the edit icon.
OUTPUT:
