I am new in this field.
-
I have some problem when we refersh the webpage the table data is clear. what i want is when we refesh the page the table data is remain same.
-
When we update the the record in the table it create new field in the localstorage. what i want is when we update field in localstorage it does not create new field only update this field.
-
When we delete the any field in the table the localstorage data is remain same. what i want is when we delete any field in the table the corresponding field in the localstorage is also delete. Thank You
Employee Data
Employee Record
Employee ID
Enter Employee ID
Employee Name
Enter Employee Name
Employee Designation
Enter Employee Designation
Employee Mobile Number
Enter Employee Mobile Number
Employee Salary
Enter Employee Salary
Sort By ID
Employee ID
Full Name
Designation
Mobile
Salary
Edit / delete* { margin: 0; padding: 0;
}
.table-heading {
text-align: center;
margin: 1% 0 1% 0;
}
.employpage {
display: flex;
flex-wrap: wrap;
width: 76%;
margin: auto;
font-size: 16px;
border: solid 2px #f1f1f1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.employpage .formdata {
width: 40%;
padding: 15px;
}
.employpage .display_table {
padding: 15px;
width: 52%;
}
.employpage .display_table table {
border: solid 1px #ccc;
border-collapse: collapse;
}
.employpage .display_table td,
.employpage .display_table th {
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
padding: 10px 5px;
text-align: left;
font-size: 13px;
}
.employpage .display_table td:first-child,
.employpage .display_table th:first-child {
border-left: none;
}
.employpage .display_table tr {
border-bottom: solid 1px #ccc;
}
.employpage .display_table tr:last-child td {
border-bottom: none;
}
.formdata form {
display: flex;
flex-wrap: wrap;
background: #f1f1f1;
padding: 15px;
}
.formdata form label{
display: block;
text-align: center;
}
.formdata form .employee-fields{
width: 100%;
margin-bottom: 10px;
}
.formdata form input {
outline: none;
width: 80%;
display: block;
margin: auto ;
padding: 7px;
box-sizing: border-box;
outline: none;
border: 1px solid #444;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
.formdata form .error{
text-align: center;
margin-top: 3px;
font-size: 14px;
visibility: hidden;
}
.formdata th {
background: #f1f1f1;
font-size: 14px;
font-weight: bold;
text-align: left;
}
.formdata .button {
background: #000;
padding: 5px 10px;
font-size: 20px;
margin: 25px auto;
display: table;
color: #fff;
width: 50%;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
.formdata .button:hover {
cursor: pointer;
}
td {
font-family: “Roboto-Regular”;
font-size: 11px;
text-align: center !important;
}
.edt {
color: #0000ff;
cursor: pointer;
}
.dlt {
color: #ff0000;
cursor: pointer;
}
.sort-table {
display: block;
background-color: transparent;
width: 50%;
margin: auto;
padding: 5px 0;
border: 1px solid #4169e1;
color: #4169e1;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
.sort-table:hover {
background-color: #4169e1;
color: #fff;
cursor: pointer;
}var selectedRow = null;
var btn = document.querySelector(“.button”)
btn.addEventListener(“click”, employdata);
function employdata() {
let empID = document.getElementById(’empID’).value.trim();
let empName = document.getElementById(’empname’).value.trim();
let empDes = document.getElementById(’empdes’).value.trim();
let empMob = document.getElementById(’empmob’).value.trim();
let empSal = document.getElementById(’empsal’).value.trim();
if(empID === ”){
document.getElementById(‘id-error’).style.visibility = “visible”;
document.getElementById(’empID’).style.border = “2px solid red”;
return false;
}
if(empName === “”){
document.getElementById(‘name-err’).style.visibility = “visible”;
document.getElementById(’empname’).style.border = “2px solid red”;
return false;
}
if(empDes === “”){
document.getElementById(‘des-err’).style.visibility = “visible”;
document.getElementById(’empdes’).style.border = “2px solid red”;
return false;
}
if(empMob === “”){
document.getElementById(‘mob-err’).style.visibility = “visible”;
document.getElementById(’empmob’).style.border = “2px solid red”;
return false;
}
if(empSal === ”){
document.getElementById(‘sal-err’).style.visibility = “visible”;
document.getElementById(’empsal’).style.border = “2px solid red”;
return false;
}
else{
alert(‘Data Added Succesfully’);
// return true;
}
var ax = read_Input_Value();
if (selectedRow == null) {
create_Tr_Td(ax);
remove_input_value()
}
else {
updatefunc(ax);
remove_input_value();
selectedRow = null;
}
}
function read_Input_Value() {
var redemp = {}
redemp[“empID”] = document.querySelector(‘.empID’).value
redemp[“ename”] = document.querySelector(“.empname”).value;
redemp[“des”] = document.querySelector(“.designation”).value;
redemp[“mob”] = document.querySelector(“.mobile”).value;
redemp[“salary”] = document.querySelector(“.empsalary”).value;
let user_records = new Array();
user_records = JSON.parse(localStorage.getItem(“users”)) ? JSON.parse(localStorage.getItem(“users”)) : []
user_records.push({
“EmpID”: redemp[“empID”],
“Name”: redemp[“ename”],
“Designation”: redemp[“des”],
“Mobile”: redemp[“mob”],
“Salary”: redemp[“salary”]
})
localStorage.setItem(“users”, JSON.stringify(user_records));
return redemp
}
function create_Tr_Td(x) {
var empTable = document.querySelector(“.list”);
var emp_tr = empTable.insertRow(empTable.length);
var emp_td1 = emp_tr.insertCell(0);
var emp_td2 = emp_tr.insertCell(1);
var emp_td3 = emp_tr.insertCell(2);
var emp_td4 = emp_tr.insertCell(3);
var emp_td5 = emp_tr.insertCell(4);
var emp_td6 = emp_tr.insertCell(5);
var totalRowCount = document.querySelector(“.list tr”).length;
emp_td1.innerHTML = x.empID;
emp_td2.innerHTML = x.ename;
emp_td3.innerHTML = x.des;
emp_td4.innerHTML = x.mob;
emp_td5.innerHTML = x.salary;
emp_td6.innerHTML = ‘Edit / Delete’;
}
function remove_input_value() {
document.querySelector(‘.empID’).value = ” “;
document.querySelector(“.empname”).value = ” “;
document.querySelector(“.designation”).value = ” “;
document.querySelector(“.mobile”).value = ” “;
document.querySelector(“.empsalary”).value = ” “;
document.getElementById(‘id-error’).style.visibility = “hidden”;
document.getElementById(‘name-err’).style.visibility = “hidden”;
document.getElementById(‘des-err’).style.visibility = “hidden”;
document.getElementById(‘mob-err’).style.visibility = “hidden”;
document.getElementById(‘sal-err’).style.visibility = “hidden”;
}
function onEdit(y) {
selectedRow = y.parentElement.parentElement;
document.querySelector(‘.empID’).value = selectedRow.cells[0].innerHTML;
document.querySelector(“.empname”).value = selectedRow.cells[1].innerHTML;
document.querySelector(“.designation”).value = selectedRow.cells[2].innerHTML;
document.querySelector(“.mobile”).value = selectedRow.cells[3].innerHTML;
document.querySelector(“.empsalary”).value = selectedRow.cells[4].innerHTML;
}
function updatefunc(redemp) {
selectedRow.cells[0].innerHTML = redemp.empID;
selectedRow.cells[1].innerHTML = redemp.ename;
selectedRow.cells[2].innerHTML = redemp.des;
selectedRow.cells[3].innerHTML = redemp.mob;
selectedRow.cells[4].innerHTML = redemp.salary;
}
function onDelete() {
if (confirm(‘Are you sure to delete this record ?’)) {
var selectdelete = document.querySelector(“a.dlt”);
selectdelete = selectdelete.parentElement.parentElement.remove(0);
}
}
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById(“employeeList”);
switching = true;
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length – 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName(“TD”)[0];
y = rows[i + 1].getElementsByTagName(“TD”)[0];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}