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:

<input type="text" id="txtbox1" />
<input type="text" id="txtbox2" />

Right now, I have code that adds the cells:

JavaScript:

<script type="text/javascript">
    function insertRow(){
                var table=document.getElementById("tbSibling");
                var row=table.insertRow(2);
                var cell1=row.insertCell(0);
                var cell2=row.insertCell(1);
                var cell3=row.insertCell(2);
                var cell4=row.insertCell(3);
    }
</script>

The Table:

<table id="myTable">
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Occupation and Employer</th>
        <th>Add</th>
        <tr>
            <td><input type="text" id="txtName" /></td>
            <td><input type="text" id="txtAge" /></td>
            <td><input type="text" id="txtGender" /></td>
            <td><input type="text" id="txtOccupation" /></td>
            <td id="btnAdd" class="button-add" onclick="insertRow();">add</td>
        </tr>
</table>

@fragilewindows When editing a post: Please remove salutations/closings that don't pertain to the question. See this post. — Blue
– Blue, Commented Oct 1, 2016 at 19:48
thanks for pointing it out, wasn't sure whether to remove from questions. I'll do that in the future. — fragilewindows
– fragilewindows, Commented Oct 1, 2016 at 19:50

Howard · Accepted Answer · 2013-07-17 03:14:54Z

8

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++;

}

edited Jul 17, 2013 at 3:14

answered Jul 17, 2013 at 2:39

Howard

4,6346 gold badges34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Learner Over a year ago

No IDs for inputs. Questioner wants different IDs for all dynamically generated inputs.

Vond Ritz · Accepted Answer · 2013-07-17 02:29:41Z

4

Here's the FIDDLE

    var ctr = 1;
$('#myTable').on('click', '.button-add', function () {
    ctr++;
    var txtName = "txtName" + ctr;
    var txtAge = "txtAge" + ctr;
    var txtGender = "txtGender" + ctr;
    var txtOccupation = "txtOccupation" + ctr;
    var newTr = '<tr><td><input type="text" id=' + txtName + ' /></td><td><input type="text" id=' + txtAge + ' /></td><td><input type="text" id=' + txtGender + ' /></td><td><input type="text" id=' + txtOccupation + ' /></td><td id="btnAdd" class="button-add">Add</td></tr>';
    $('#myTable').append(newTr);
});

edited Jul 17, 2013 at 2:29

answered Jul 17, 2013 at 2:24

Vond Ritz

2,01215 silver badges15 bronze badges

1 Comment

Learner Over a year ago

All textboxes in different rows have same IDs @Vond

Netorica · Accepted Answer · 2013-07-17 02:18:39Z

3

just create a html code with a textbox code on it then append it on the element

$("#addRow").click(function(){
   $("#myTable").append("<tr><td>row</td><td><input type='text'></td></tr>");
});

a working code for you http://jsfiddle.net/WNDQJ/1/

answered Jul 17, 2013 at 2:18

Netorica

19.5k19 gold badges78 silver badges109 bronze badges

1 Comment

Wyetro Over a year ago

I'm not a fan of condensing everything to one long line, but this definitely worked really well for what I was trying to do!

Learner · Accepted Answer · 2013-07-17 02:30:45Z

1

Here's a quick solution:

$('#btnAdd').click(function(e) {
    $('#myTable tr:last').after(
        '<tr><td><input type="text" id="txtName' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtAge' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtGender' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtOccupation' + $("tr:last")[0].rowIndex + '" /></td></tr>'
    );
});

Sample Fiddle: http://jsfiddle.net/YqV8G/

Also, I suggest you only have one Add button. You don't need to duplicate add buttons unless you need it.

answered Jul 17, 2013 at 2:30

Learner

4,0047 gold badges32 silver badges45 bronze badges

Comments

Abdul Waheed · Accepted Answer · 2014-08-24 13:13:41Z

<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
      var tbl = document.getElementById('table1');
      var lastRow = tbl.rows.length;
      var iteration = lastRow - 1;
      var row = tbl.insertRow(lastRow);
      var firstCell = row.insertCell(0);
      var el = document.createElement('input');

      el.type = 'text';
      el.name = 'name_' + i;
      el.id = 'name_' + i;
      el.size = 20;
      el.maxlength = 20;
      firstCell.appendChild(el);

     // alert(i);
      i++;
      frm.h.value=i;
    //  alert(i);
}
</script>

<!DOCTYPE html>
<html>
<body>

<form action="addtablerow3.php" method="post" name="frm" id="frm"> 
<input type="button" value="Add New Item" onclick="addRow();" />
</form>

<table id="table1" border="1" width="100%">
<tr>
    <td width="10%" bgcolor="#336666">HI </td>
    <td> this </td><td>is </td><td> 4</td>
</tr>
</table>


</body>
</html>

mohankittu · Accepted Answer · 2014-12-10 06:22:24Z

0

**add button** 



<div align="right">
        <input type="button" value="Add Phase" class="Add" />

        <input type="button" value="Save" class="saved" />
        <input type="button" value="Close" class="cancel" />



    </div>

answered Dec 10, 2014 at 6:22

mohankittu

113 bronze badges

Comments

fragilewindows · Accepted Answer · 2016-10-05 12:22:34Z

JavaScript

$(".Add").click(function () {
            $(".tbl").append(newRow);
            ddlEditSelected = '0';
            numberOfRows++;

        });




        var newRow = "<tr><td><select class='status1' id='ddlStatus'  > <option value='0'>--Select--</option><option value='2'>Schedule Variance</option>" +
                           "<option value='3'>Effort Variance</option>" +
                           "<option value='4'>GOM Variance</option>" +
                            "<option value='5'>Defect Density per Person Day of Effort</option>" +
                             "<option value='6'>Resource Variance</option>" +
                              "<option value='7'>Process Quality</option>" +
                               "<option value='8'>Non Billable CRs</option>" +


                           "<td><input type='text' class='source1' id='txtSource' name='Source'  maxlength='3' onkeypress='return isNumberKey(event)' onblur='return checkvalidation(this)' ></td></td></tr>";
    });

HTML

<table width="100%" id="qualitygoal1" class="tbl">
            <tbody>
                <tr>
                    <th align="center">Parameter</th>
                    <th align="center">WeightAge</th>


                </tr>

                @foreach (var data in Model)
                {

                    <tr>
                        <td>
                            <span class="spanStatus" id="[email protected]" destinationid="@data.Parameter">@data.ParameterValue</span>
                            <select class="status" id="[email protected]">
                                <option value="0">--Select--</option>
                                <option value="2">Schedule Variance</option>
                                <option value="3">Effort Variance</option>
                                <option value="4">GOM Variance</option>
                                <option value="5">Defect Density per Person Day of Effort</option>
                                <option value="6">Resource Variance</option>
                                <option value="7">Process Quality</option>
                                <option value="8">Non Billable CRs</option>

                            </select>
                        </td>
                        <td>
                            <span class="spanSource" id="[email protected]">@data.Weightages</span>
                            <input class="Source" id="[email protected]" type="text" value="@data.Weightages" maxlength="3" onkeypress="return isNumberKey(event)" onblur="return checkvalidation(this)" />
                        </td>



                    </tr>

                }
            </tbody>
        </table>

Collectives™ on Stack Overflow

How to dynamically add a table row with textbox?

7 Answers 7

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related