Question

Adding a single row in a table (html) and deleting it, using JavaScript, is simple. But, is it possible to add multiple rows, like 2 or more, by calling the addrow function only once? The added rows will have different elements, like first row will be having a textfield, the other a textarea and like that…

Is there any other alternative in html to do that?

Answer 1

I solved it by myself by writing code similar to this :

adding three rows,first with a textfield,second having a textarea and the third having a button

function addRow(tableId)
 {
  var addrow=1;
  var table=document.getElementById(tableId);
  var rowCount=table.rows.length;
  for(var i=1;i<=3;i++)
   {
    if(addrow==1)
    {
      var newRow=table.insertRow(rowCount);
      var cell0=newRow1.insertCell(0);
      var element0=document.createElement("input");
      element0.type="text";
      cell0.appendChild(element0);
    }
    if(addrow==2)
    {
      var newRow2=table.insertRow(rowCount);
      var cell0=newRow1.insertCell(0);
      var element0=document.createElement("textarea");
      cell0.appendChild(element0);
    }
    if(addrow==3)
    {
      var newRow3=table.insertRow(rowCount);
      var cell0=newRow1.insertCell(0);
      var element0=document.createElement("input");
      element0.type="button";
      cell0.appendChild(element0);
    }
addrow++;
   }
 }

Each time the for loop runs, a new html element is added in the table and hence I got three rows added dynamically each having a different element .