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 button to sort the list based on name, telephone or email?

i have example inputs in the table/array and the user can add more contacts as well, so it needs to work for both of them.

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();

}}