I created an address book where the user enters the name, phone and email in the input field. This is stored in a array/ list that adds up and shows it in a table below. How can I use a search box to filter the list? I want to filter on name, phone number and email and Filtering is case-insensitive.

and Add a settings panel that is hidden by default and is shown by clicking a button or link. The user can customize the appearance of the list, for example, change the font family and size for the different fields (name, tel, email), from predefined lists.

here's my code:

HTML:

Add entry

Name:

Tel:

Email:

Name	Tel	Email

Javascript:

var Rows = null

function Form() {

var formData = readFormData();

if (Rows == null)

insertNewRecord(formData);

else

updateRecord(formData);

resetForm();

}

function readFormData() {

var formData = [];

formData["name"] = document.getElementById("name").value;

formData["tel"] = document.getElementById("tel").value;

formData["email"] = document.getElementById("email").value;

return formData;

}

function insertNewRecord(data) {

var table = document.getElementById("MyList").getElementsByTagName('tbody')[0];

var newRow = table.insertRow(table.length);

cell1 = newRow.insertCell(0);

cell1.innerHTML = data.name;

cell2 = newRow.insertCell(1);

cell2.innerHTML = data.tel;

cell3 = newRow.insertCell(2);

cell3.innerHTML = data.email;

cell4 = newRow.insertCell(3);

cell4.innerHTML = `Edit

Delete`;

}

function insert(){

var table = document.getElementById("MyList").getElementsByTagName('tbody')[0];

var newRow = table.insertRow(table.length);

cell1 = newRow.insertCell(0);

cell1.innerHTML = "Nina";

cell2 = newRow.insertCell(1);

cell2.innerHTML = "48569244";

cell3 = newRow.insertCell(2);

cell3.innerHTML = "example";

cell4 = newRow.insertCell(3);

cell4.innerHTML = `Edit

Delete`;

var newRow = table.insertRow(table.length);

cell1 = newRow.insertCell(0);

cell1.innerHTML = "harald";

cell2 = newRow.insertCell(1);

cell2.innerHTML = "98569144";

cell3 = newRow.insertCell(2);

cell3.innerHTML = "example email";

cell4 = newRow.insertCell(3);

cell4.innerHTML = `Edit

Delete`;

var newRow = table.insertRow(table.length);

cell1 = newRow.insertCell(0);

cell1.innerHTML = "susanne";

cell2 = newRow.insertCell(1);

cell2.innerHTML = "45625894";

cell3 = newRow.insertCell(2);

cell3.innerHTML = "example mail";

cell4 = newRow.insertCell(3);

cell4.innerHTML = `Edit

Delete`;

}

function resetForm() {

document.getElementById("name").value = "";

document.getElementById("tel").value = "";

document.getElementById("email").value = "";

selectedRow = null;

}

function Edit(td) {

selectedRow = td.parentElement.parentElement;

document.getElementById("name").value = selectedRow.cells[0].innerHTML;

document.getElementById("tel").value = selectedRow.cells[1].innerHTML;

document.getElementById("email").value = selectedRow.cells[2].innerHTML;

}

function updateRecord(formData) {

selectedRow.cells[0].innerHTML = formData.name;

selectedRow.cells[1].innerHTML = formData.tel;

selectedRow.cells[2].innerHTML = formData.email;

}

function Delete(td) {

if (confirm('Do you want to delete it?')) {

row = td.parentElement.parentElement;

document.getElementById("MyList").deleteRow(row.rowIndex);

resetForm();

}}