All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Dynamically Add Rows To Table Using JavaScript

Last Updated : Mar 11, 2024

Dynamically Add Rows To Table Using JavaScript

In this article we will show you the solution of dynamically add rows to table using JavaScript, your ability to add and remove rows from an HTML page using javascript will be aided by this brief blog post.

In most cases, adding more rows is required inside the project. Let's use a typical timesheet application and your expense details as an example.

Both of these applications should be dynamic and allow for the user to add additional rows. In addition, the table's unimportant rows must be deleted.

In some cases, it might be necessary for the user to use JavaScript to dynamically assign data for multiple rows to a <td> of a table.

We cannot predict how many fields should be included on the website.

Step By Step Guide On Dynamically Add Rows To Table Using JavaScript :-

<html>
<head>
<title>Onclick increase Table Rows</title>
<script type="text/javascript">
function addRows(){
 var table = document.getElementById('emptbl');
 var rowCount = table.rows.length;
 var cellCount = table.rows[0].cells.length;
 var row = table.insertRow(rowCount);
 for(var i =0; i <= cellCount; i++){
  var cell = 'cell'+i;
  cell = row.insertCell(i);
  var copycel = document.getElementById('col'+i).innerHTML;
  cell.innerHTML=copycel;
  if(i == 3){
   var radioinput = document.getElementById('col3').getElementsByTagName('input');
   for(var j = 0; j <= radioinput.length; j++) {
    if(radioinput[j].type == 'radio') {
     var rownum = rowCount;
     radioinput[j].name = 'gender['+rownum+']';
    }
   }
  }
 }
}
function deleteRows(){
 var table = document.getElementById('emptbl');
 var rowCount = table.rows.length;
 if(rowCount > '2'){
  var row = table.deleteRow(rowCount-1);
  rowCount--;
 }
 else{
  alert('There should be atleast one row');
 }
}
</script>
</head>
<body>
<form action="#" method="post">
 <table id="emptbl">
  <tr>
   <th>Employee Name</th>
   <th>Phone</th>
   <th>Department</th>
   <th>Gender</th>
  </tr>
  <tr>
   <td id="col0"><input type="text" name="empname[]" value="" /></td>
   <td id="col1"><input type="text" name="phone[]" value="" /></td>
   <td id="col2">
   <select name="department[]" id="dept">
   <option value="0">Select Department</option>
   <option value="1">Sales</option>
   <option value="2">IT</option>
   <option value="3">Warehouse</option>
   </select>
          </td>
          <td id="col3">
   <input type="radio" name="gender[0]" value="male" />Male
   <input type="radio" name="gender[1]" value="female" />Female
          </td>
  </tr>
 </table>
 <table>
  <tr>
   <td><input type="button" value="Add Row" onclick="addRows()" /></td>
   <td><input type="button" value="Delete Row" onclick="deleteRows()" /></td>
   <td><input type="submit" value="Submit" /></td>
  </tr>
 </table>
 </form>
</body>
</html>
  1. The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
  2. Use the head> tag to describe the project's heading. The championship brackets are closed, but the final brackets were also open. External style sheets, also known as step-by-step style sheets, appear on a webpage based on the URL or path.
  3. The script> tag was then added. The script tag also includes the javascript google API run and an explanation of the code or file we used.
  4. Then we run a variable function to generate a table.
  5. Three buttons have been added to our form element: Add Row,Delete Row,and Submit form data.
  6. The programme is then run using if and else statements.
  7. Following that, we use an HTML programme to create a table.
  8. Table horizontal, Table draw, and Table row are used in the programme.
  9. After that, we use /table> /form> /body> /html> to close the programme.

Conclusion :-

The simplest way to implement the functionality is to create two javascript functions that add and delete rows in an HTML table.

When requirements are unclear, people may attempt to use an external javascript framework.

This functionality has been achieved by developers using jQuery.

I hope this article on dynamically add rows to table using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪