Notes

function edit_row(no) {

var editdisplay,
element = document.getElementById("edit_button" + no);
if (element != null) {
editdisplay = element.style.display = "none";
} else {
editdisplay = null;
}
var savedisplay,
element = document.getElementById("save_button" + no);
if (element != null) {
savedisplay = element.style.display = "block";
} else {
savedisplay = null;
}

var name = document.getElementById("name_row" + no);
var empid = document.getElementById("empid_row" + no);
var mobilenumber = document.getElementById("mobilenumber_row" + no);
var emailid = document.getElementById("emailid_row" + no);
var emptype = document.getElementById("emptype_row" + no);
var joiningdate = document.getElementById("joiningdate_row" + no);

var name_data = name.innerHTML;
var empid_data = empid.innerHTML;
var mobilenumber_data = mobilenumber.innerHTML;
var emailid_data = emailid.innerHTML;
var emptype_data = emptype.innerHTML;
var joiningdate_data = joiningdate.innerHTML;

name.innerHTML =
"<input type='text' id='name_text" + no + "' value='" + name_data + "'>";
empid.innerHTML =
"<input type='text' id='empid_text" + no + "' value='" + empid_data + "'>";
mobilenumber.innerHTML =
"<input type='number' id='mobilenumber_text" +
no +
"' value='" +
mobilenumber_data +
"'>";
emailid.innerHTML =
"<input type='email' id='emailid_text" +
no +
"' value='" +
emailid_data +
"'>";
// emptype.innerHTML =
// "<input type='text' id='emptype_text" +
// no +
// "' value='" +
// emptype_data +
// "'>";
emptype.innerHTML =
"<select id='emptype_text"+no+"' type='dropdown' class='form-input-size'><option disabled selected value>Select employee type</option><option value='full time employee'>full time employee</option><option value='part time employee'>part time employee</option><option value='contractor'>contractor</option><option value='Other'>Other</option></select>";
// emptype.innerHTML="<input type='dropdown' id='emptype_text"+no+"' value='"+emptype_data+"'><option value=''>"+Select+employee+type+"</option><option>"+full+time+employee+"</option><option>"+part+time+employee+"</option><option>"+contractor+"</option></input>";
joiningdate.innerHTML =
"<input type='date' id='joiningdate_text" +
no +
"' value='" +
joiningdate_data +
"'>";
}

function save_row(no) {
var name_val,
element = document.getElementById("name_text" + no);
if (element != null) {
name_val = element.value;
} else {
name_val = null;
}
var empid_val,
element = document.getElementById("empid_text" + no);
if (element != null) {
empid_val = element.value;
} else {
empid_val = null;
}
var mobilenumber_val,
element = document.getElementById("mobilenumber_text" + no);
if (element != null) {
mobilenumber_val = element.value;
} else {
mobilenumber_val = null;
}
var emailid_val,
element = document.getElementById("emailid_text" + no);
if (element != null) {
emailid_val = element.value;
} else {
emailid_val = null;
}
var emptype_val,
element = document.getElementById("emptype_text" + no);
if (element != null) {
emptype_val = element.value;
} else {
emptype_val = null;
}
var joiningdate_val,
element1 = document.getElementById("joiningdate_text" + no);
if (element1 != null) {
joiningdate_val = element1.value;
} else {
joiningdate_val = null;
}
var result = confirm("Are you sure want to save?");
if (result) {
document.getElementById("name_row" + no).innerHTML = name_val;
document.getElementById("empid_row" + no).innerHTML = empid_val;
document.getElementById("mobilenumber_row" + no).innerHTML = mobilenumber_val;
document.getElementById("emailid_row" + no).innerHTML = emailid_val;
document.getElementById("emptype_row" + no).innerHTML = emptype_val;
document.getElementById("joiningdate_row" + no).innerHTML = joiningdate_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
alert("Saved Successfully");
}

}



function delete_row(no) {
var result = confirm("Are you sure to delete?");
if (result) {
document.getElementById("row" + no + "").outerHTML = "";
}
var table = document.getElementById("data_table");
var nodata = "No Data Available";
var table_len = table.rows.length ;
if(table_len == 1){
// var row = (table.insertRow(table_len).outerHTML =
// "<h1 id='nodata'>"+nodata+"</h1>");}
document.getElementById("nodata").innerHTML = nodata;
}
}


const printError = (elemId, hintMsg) => {
document.getElementById(elemId).innerHTML = hintMsg;
};

function add_row() {
var new_name = document.getElementById("new_name").value;
localStorage.setItem("new_name", new_name);
var namedata = localStorage.getItem("new_name");
// document.getElementById("new_name").value = namedata;
var new_empid = document.getElementById("new_empid").value;
localStorage.setItem("new_empid", new_empid);
var empiddata = localStorage.getItem("new_empid");
document.getElementById("new_empid").value = empiddata;

var new_mobilenumber = document.getElementById("new_mobilenumber").value;
localStorage.setItem("new_mobilenumber", new_mobilenumber);
var mobilenumberdata = localStorage.getItem("new_mobilenumber");
document.getElementById("new_mobilenumber").value = mobilenumberdata;

var new_emailid = document.getElementById("new_emailid").value;
localStorage.setItem("new_emailid", new_emailid);
var emailiddata = localStorage.getItem("new_emailid");
document.getElementById("new_emailid").value = emailiddata;

var new_emptype = document.getElementById("new_emptype").value;
localStorage.setItem("new_emptype", new_emptype);
var emptypedata = localStorage.getItem("new_emptype");
document.getElementById("new_emptype").value = emptypedata;

var new_joiningdate = document.getElementById("new_joiningdate").value;
localStorage.setItem("new_joiningdate", new_joiningdate);
var joiningdatedata = localStorage.getItem("new_joiningdate");
document.getElementById("new_joiningdate").value = joiningdatedata;

// if (namedata == "") {
// printError("nameerrormessage", "*Username Should Not Be Empty");
// alert("Username Should Not Be Empty");
// // document.getElementById("nameerrormessage").innerHTML= "username should not be empty";
// // alert("name should not be empty");
// // form.name.focus();
// } else {
// var regex = /^[a-zA-Zs]+$/;
// if (regex.test(namedata) === false) {
// printError("nameerrormessage", "*Enter A valid Name");
// // alert("Enter A valid Name");
// // document.getElementById("nameerrormessage").innerHTML= "username should not be empty";
// // form.name.focus();
// } else {
// printError("nameerrormessage", " ");
// }
// }
// if (empiddata == "") {
// printError("empiderrormessage", "*EmployeeID Should Not Be Empty");
// // alert("EmployeeID Should Not Be Empty");
// // form.name.focus();
// } else {
// if (empiddata.length < 6) {
// printError("empiderrormessage", "*Minimum Six Characters Required");
// // alert("Minimum Six Characters Required");
// // form.name.focus();
// } else {
// printError("empiderrormessage", " ");
// }
// }
if (emptypedata == "") {
emptypedata = "no data to display";
}
// if (mobilenumberdata == "") {
// printError("moberrormessage", "*Mobile Number Should Not Be Empty");
// // alert("Mobile Number Should Not Be Empty");
// // form.name.focus();
// } else {
// var re = /^[+]?[(]?[0-9]{3}[)]?[-s.]?[0-9]{3}[-s.]?[0-9]{4,6}$/im;
// if (mobilenumberdata.length != 10 && re.test(mobilenumberdata) === false) {
// printError("moberrormessage", "*Please Enter A Valid Number");
// // alert("Please Enter A Valid Number");
// // form.name.focus();
// } else {
// printError("moberrormessage", "");
// }
// }
// if (emailiddata == "") {
// printError("emailerrormessage", "*EmailID Should Not Be Empty");
// // alert("EmailID Should Not Be Empty");
// // form.name.focus();
// } else {
// const re =
// /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([^<>()[].,;:s@"]+.)+[^<>()[].,;:s@"]{2,})$/i;
// if (re.test(emailiddata) === false) {
// printError("emailerrormessage", "*Please Enter A Valid Email Address");
// // alert("Please Enter A Valid Email Address");
// // form.name.focus();
// } else {
// printError("emailerrormessage", "");
// }
// }

// if (joiningdatedata == "") {
// printError("dateerrormessage", "*Date Should Not Be Empty");
// // alert("Date Should Not Be Empty");
// // form.name.focus();
// return false;
// } else {
// re = /^d{1,2}/d{1,2}/d{4}$/;
// if (re.test(joiningdatedata) === true) {
// printError("dateerrormessage", "*Please Enter A Valid Date");
// // alert("Please Enter A Valid Date");
// // form.name.focus();
// return false;
// } else {
// printError("dateerrormessage", " ");
// }
// }



var table = document.getElementById("data_table");
var table_len = table.rows.length - 1;
console.log(table.rows.length);
var row = (table.insertRow(table_len).outerHTML =
"<tr id='row" +
table_len +
"'><td id='name_row" +
table_len +
"'>" +
new_name +
"</td><td id='empid_row" +
table_len +
"'>" +
new_empid +
"</td><td id='mobilenumber_row" +
table_len +
"'>" +
new_mobilenumber +
"</td><td id='emailid_row" +
table_len +
"'>" +
new_emailid +
"</td><td id='emptype_row" +
table_len +
"'>" +
emptypedata +
"</td><td id='joiningdate_row" +
table_len +
"'>" +
new_joiningdate +
"</td><td><i type='button' id='edit_button" +
table_len +
"' value='Edit' class='fa-solid fa-pen-to-square' onclick='edit_row(" +
table_len +
")'></i> <i type='button' id='save_button" +
table_len +
"' value='Save' class='fa-solid fa-floppy-disk' onclick='save_row(" +
table_len +
")'></i> <i type='button' value='Delete' class='fa-solid fa-trash' onclick='delete_row(" +
table_len +
")'></i></td></tr>");

document.getElementById("new_name").value = "";
document.getElementById("new_empid").value = "";
document.getElementById("new_mobilenumber").value = "";
document.getElementById("new_emailid").value = "";
document.getElementById("new_emptype").value = "";
document.getElementById("new_joiningdate").value = "";

alert("suceefully Added The Data");
}


function load_row(){
var table = document.getElementById("data_table");
var table_len = table.rows.length ;
var row = (table.insertRow(table_len).outerHTML =
"<tr id='row" +
table_len +
"'><td id='name_row" +
table_len +
"'><div class='form-input'><input type='text' id='new_name' name='name' class='form-input-size' onblur='validate_me(this)'><div class='error' id='nameerrormessage'></div></div></td><td id='empid_row" +
table_len +
"'><div class='form-input'><input type='text' id='new_empid' class='form-input-size' onblur='validate_me1(this)'><div class='error' id='empiderrormessage'></div></div></td><td id='mobilenumber_row" +
table_len +
"'><div class='form-input'><input type='number' id='new_mobilenumber' class='form-input-size' onblur='validate_me2(this)'><div class='error' id='moberrormessage'> </div></div></td><td id='emailid_row" +
table_len +
"'> <div class='form-input'><input type='email' id='new_emailid' class='form-input-size' onblur='validate_me3(this)'><div class='error' id='emailerrormessage'></div></div></td><td id='emptype_row" +
table_len +
"'><div class='form-input'><input type='text' id='new_emptype' class='form-input-size' ><div class='error' id='emptypeerrormessage'></div></div></td><td id='joiningdate_row" +
table_len +
"'><div class='form-input'><input type='date' id='new_joiningdate' class='form-input-size' onblur='validate_me4(this)'><div class='error' id='dateerrormessage'></div></div></td><td><i class='fa-solid fa-floppy-disk' type='button' id='save_button" +
table_len +
"' value='Save' onclick='add_row(" +
table_len +
")'></i> <i class='fa-solid fa-trash' type='button' value='Delete' onclick='delete_row(" +
table_len +
")'></i></td></tr>");

var table = document.getElementById("data_table");
var table_len = table.rows.length ;
if(table_len > 1){
document.getElementById("nodata").innerHTML = " ";
}
}


function validate_me(username){
var regex = /^[a-zA-Zs]+$/;
var textField = document.getElementById("new_name");
if(username.value.length==0){ // If entered value count is 0
alert("Please enter a value");
username.style.borderColor="red";
printError("nameerrormessage", "*Username Should Not Be Empty");
return false;
}
else {
if (regex.test(username.value) === false) {
printError("nameerrormessage", "*Enter A valid Name");
// alert("Enter A valid Name");
// document.getElementById("nameerrormessage").innerHTML= "username should not be empty";
// form.name.focus();
} else {
printError("nameerrormessage", " ");
return(true);
}
}
}

function validate_me1(empid){
var new_empid = document.getElementById("new_empid");
if (empid.value == "") {
printError("empiderrormessage", "*EmployeeID Should Not Be Empty");
// alert("EmployeeID Should Not Be Empty");
// form.name.focus();
} else {
if (empid.value.length < 6) {
printError("empiderrormessage", "*Minimum Six Characters Required");
// alert("Minimum Six Characters Required");
// form.name.focus();
} else {
printError("empiderrormessage", " ");
}
}
}
function validate_me2(mobilenumberdata){
if (mobilenumberdata.value == "") {
printError("moberrormessage", "*Mobile Number Should Not Be Empty");
// alert("Mobile Number Should Not Be Empty");
// form.name.focus();
} else {
var re = /^[+]?[(]?[0-9]{3}[)]?[-s.]?[0-9]{3}[-s.]?[0-9]{4,6}$/im;
if (mobilenumberdata.value.length != 10 && re.test(mobilenumberdata.value) === false) {
printError("moberrormessage", "*Please Enter A Valid Number");
// alert("Please Enter A Valid Number");
// form.name.focus();
} else {
printError("moberrormessage", "");
}
}
}
function validate_me3(emailiddata){
if (emailiddata.value == "") {
printError("emailerrormessage", "*EmailID Should Not Be Empty");
// alert("EmailID Should Not Be Empty");
// form.name.focus();
} else {
const re =
/^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([^<>()[].,;:s@"]+.)+[^<>()[].,;:s@"]{2,})$/i;
if (re.test(emailiddata.value) === false) {
printError("emailerrormessage", "*Please Enter A Valid Email Address");
// alert("Please Enter A Valid Email Address");
// form.name.focus();
} else {
printError("emailerrormessage", "");
}
}
}
function validate_me4(joiningdatedata){
if (joiningdatedata.value == "") {
printError("dateerrormessage", "*Date Should Not Be Empty");
// alert("Date Should Not Be Empty");
// form.name.focus();
return false;
} else {
re = /^d{1,2}/d{1,2}/d{4}$/;
if (re.test(joiningdatedata.value) === true) {
printError("dateerrormessage", "*Please Enter A Valid Date");
// alert("Please Enter A Valid Date");
// form.name.focus();
return false;
} else {
printError("dateerrormessage", " ");
}
}
}

// function load_row(){
// var myContent = localStorage.getItem("new_name");
// document.getElementById("new_name").value = myContent;
// }

// function ValidationForm(){
// var name=document.form.name.value;
// if (name==null || name==""){
// alert("Name can't be blank");
// name.focus();
// return false;
// }
// }
// function printError(elemId, hintMsg) {
// document.getElementById(elemId).innerHTML = hintMsg;
// }

// function validateform(){
// var username = document.form.name.value;
// if(username == "") {
// document.getElementById("nameerrormessage").innerHTML= "username should not be empty";
// // alert("name should not be empty");
// form.name.focus();
// return(false);
// }
// else {
// var regex = /^[a-zA-Zs]+$/;
// if(regex.test(username) === false) {
// document.getElementById("nameerrormessage").innerHTML= "username should not be empty";
// } else {
// document.getElementById("nameerrormessage").innerHTML= "username should not be empty";
// return(false);
// }
// }
// }

// const form = document.getElementById('form');
// const username = document.getElementById('new_name');
// form.addEventListener('submit', e => {
// e.preventDefault();

// validateInputs();
// });

// const validateInputs = () => {
// const usernameValue = username.value.trim();
// if(usernameValue === '') {
// setError(username, 'Username is required');
// } else {
// setSuccess(username);
//
// };