Add new row and copy existing row to HTML table using JavaScript

Sharing is Caring

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

HTML table

Here goes source of HTML form

<form> <span><label>
Name<input type="text" id="it1" />
<br/> <span><label>
Department<input type="text" id="it2" />

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
     = "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
     = "ID";
              //Add it to table

Download HTML Page

Cheers 🙂 Happy Learning 

Here you can test it- 


Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

Leave a Reply

Your email address will not be published. Required fields are marked *