How to dynamically add a table row with textbox?

Question

I have a table where each row contains 4 cells and each cell contains a textbox by default. I have only 1 row and a button that allows me to add an additional row every time it's clicked. How do I dynamically add table rows containing textboxes in Javascript? I would also like to have their textbox id change: ``` ``` Right now, I have code that adds the cells: JavaScript: ``` ``` The Table: ```

Name	Age	Gender	Occupation and Employer	Add

Accepted Answer

Check with this, it's all you want, by using pure javascript. JSFIDDLE

```
var index = 1;
function insertRow(){
            var table=document.getElementById("myTable");
            var row=table.insertRow(table.rows.length);
            var cell1=row.insertCell(0);
            var t1=document.createElement("input");
                t1.id = "txtName"+index;
                cell1.appendChild(t1);
            var cell2=row.insertCell(1);
            var t2=document.createElement("input");
                t2.id = "txtAge"+index;
                cell2.appendChild(t2);
            var cell3=row.insertCell(2);
            var t3=document.createElement("input");
                t3.id = "txtGender"+index;
                cell3.appendChild(t3);
            var cell4=row.insertCell(3);
            var t4=document.createElement("input");
                t4.id = "txtOccupation"+index;
                cell4.appendChild(t4);
      index++;

}
```

How to dynamically add a table row with textbox?

Solution

Problem