Hello All
This post is about adding a new row in HTML table using form entry or copy existing row to the table using javascript. So here I have created an HTML page, added a form, two buttons, and a table on the page and it looks like this
Here goes source of HTML form
<form> <span><label>
Name<input type="text" id="it1" />
</label></span> <br/> <span><label>
Department<input type="text" id="it2" />
</label></span> <br/> </form>
Next is source of both buttons that call javascript method
<button onclick="copyTableRow()">Copy Row</button>
<button onclick=“addNewRow()”>Add row to table</button>
Javascript function to add new row
function addNewRow() { //Get table object var comp = document.getElementById("t1"); //Insert new row var row = comp.insertRow(1); //Set default row id row.id = "r1"; //Add columns in row var column1 = row.insertCell(0); var column2 = row.insertCell(1);
//Set input text value in columns of row
column1.innerHTML = document.getElementById(“it1”).value;
column2.innerHTML = document.getElementById(“it2”).value;
//Empty form fields
document.getElementById(“it1”).value = “”;
document.getElementById(“it2”).value = “”;
}
Javascript function to copy row
function copyTableRow() { //Get Row object var row = document.getElementById("r1"); //Get table object var table = document.getElementById("t1"); //Create clone row var cloneRow = row.cloneNode(true); //Set Id for new row cloneRow.id = "ID"; //Add it to table table.appendChild(cloneRow); }
Cheers 🙂 Happy Learning
Here you can test it-
NameDepartment
