Whenever I try to add a new row by clicking the Add Row button, an error occurs. My goal is to append a new 'tr' every time I click the add row button. Each 'td' should include a checkbox, first name, last name, email, mobile number, edit, and save buttons.
- I want to be able to save the values when I click the save button.
- There should also be an edit button to modify the fields.
- The checkbox is for selecting multiple rows in order to delete them all at once.
Could someone please assist me with this? Thank you in advance.
var form = document.createElement('form');
document.body.appendChild(form);
var table = document.createElement('table');
table.setAttribute("id","myTable");
form.appendChild(table);
var btnClick = document.createElement('button');
btnClick.setAttribute('onclick','addTable()');
btnClick.innerHTML = "Add Row";
form.appendChild(btnClick);
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
function addTable() {
var row = document.createElement('tr');
table.appendChild(row);
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(checkbox);
cell.appendChild(input);
cell.appendChild(input1);
cell.appendChild(input2);
cell.appendChild(input3);
cell.appendChild(btnSave);
cell.appendChild(btnEdit);
}