Adding dropdown list to new row on button click

Question

I am trying to add a new row on button click. In my new row I am trying to add a Textbox and a dropdown list. I don't know what I am doing wrong ? Can anybody help me with this problem. Thanks in advance.

HTML

<table>
        <tr>
            <td><input type="text" name="data1" value="TempData" /></td>
              <td><button type="button" onClick ="addRow(this)">Add</button></td>
         </tr>

 </table>

Javascript function:

function addRow(btn) {         
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var rowCount = table.rows.length;

    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    cell1.appendChild(element1);


    var cell3 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "select";
    var option1 = document.createElement("option");
    option1.innerHTML = "Option1";
    option1.value = "1";
    element2.add(option1, null);
    var option2 = document.createElement("option");
    option2.innerHTML = "Option2";
    option2.value = "2";
    element2.add(option2, null);
    cell3.appendChild(element2);
}

JSFiddle http://jsfiddle.net/wAyhm/2/

var parentRow = btn.parentNode. parendtNode;

c.P.u1
– c.P.u1

2013-06-24 05:38:17 +00:00
Commented Jun 24, 2013 at 5:38 — c.P.u1
– c.P.u1, Commented Jun 24, 2013 at 5:38
corrected it, but still not working

PhantomM
– PhantomM

2013-06-24 05:42:26 +00:00
Commented Jun 24, 2013 at 5:42 — PhantomM
– PhantomM, Commented Jun 24, 2013 at 5:42
element2.add(option1, null); there is no .add method.

stackErr
– stackErr

2013-06-24 05:47:07 +00:00
Commented Jun 24, 2013 at 5:47 — stackErr
– stackErr, Commented Jun 24, 2013 at 5:47

score 7 · Accepted Answer · 2013-06-24 05:50:03Z

7

Try this using jQuery. But if u want answer in javascript then skip my answer.

function AddRow() {
                 $('#tblTest').append(
            '<tr><td>' +
              '<input type="text" />' +
              '<select><option value="1">Option 1</option>' +
                    '<option value="2">Option 2</option>' +
                    '<option value="3">Option 3</option></select>' +
            '</td></tr>');
    }
}

<table id="tblTest">
    <tr>
        <td>
            <input type="text" name="data1" value="TempData" />
        </td>
        <td>
            <input type="button" value="Add" onclick="AddRow()" />
        </td>
    </tr>
</table>

edited Jun 24, 2013 at 5:50

answered Jun 24, 2013 at 5:42

user1931366

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

3 Comments

PhantomM Over a year ago

How can I add the options to select ? And I have to add multiple rows and in actual problem there are multiple rows already in the table. It won't work correctly in that case, I suppose. I might be wrong.

user1931366 Over a year ago

Using jQuery it will be simple and easy. Check it now. use it to add options <option value="2">Option 2</option>

PhantomM Over a year ago

I will try your solution. Can you suggest a solution for similar problem. stackoverflow.com/questions/17255841/…

c.P.u1 · Accepted Answer · 2013-06-24 05:49:56Z

4

function addRow(btn) {         
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    cell1.appendChild(element1);
    var cell3 = row.insertCell(1);
    //var element2 = document.createElement("input");
    var element2 = document.createElement("select");
    //element2.type = "select";
    var option1 = document.createElement("option");
    option1.innerHTML = "Option1";
    option1.value = "1";
    element2.add(option1, null);
    var option2 = document.createElement("option");
    option2.innerHTML = "Option2";
    option2.value = "2";
    element2.add(option2, null);
    cell3.appendChild(element2);
}

Updated Fiddle:

Problem was with the commented lines. A select element isn't an input element. You can't have a <input type="select"/>. Since an HTMLInputElement doesn't have an add method, addRow threw an exception.

edited Jun 24, 2013 at 5:49

answered Jun 24, 2013 at 5:44

c.P.u1

17.1k6 gold badges48 silver badges42 bronze badges

2 Comments

PhantomM Over a year ago

Can you suggest solution for the following question as well ? stackoverflow.com/questions/17255841/…

Vivek Sadh Over a year ago

What is the meaning of the first 2 lines ? var parentRow = btn.parentNode.parentNode; var table = parentRow.parentNode;

user2511671 · Accepted Answer · 2013-06-24 05:58:08Z

1

You can add any number of rows by following code

function AddRow() {   $('#main_div').append('<div><input type="text" /> <select></select></div>');

<div id="main_div">
        <div><input type="text" name="data1" value="" /></div>
</div>
<div style="margin-top:15px;" ><input type="button" value="Add" onclick="AddRow()" /></div>

answered Jun 24, 2013 at 5:58

user2511671

Comments

mohkhan · Accepted Answer · 2013-06-24 05:41:17Z

This kind of fixed your problem

var addRow = function(btn) {         
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var rowCount = table.rows.length;

    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    cell1.appendChild(element1);


    var cell3 = row.insertCell(1);
    var element2 = document.createElement("select");
    var option1 = document.createElement("option");
    option1.innerHTML = "Option1";
    option1.value = "1";
    element2.appendChild(option1, null);
    var option2 = document.createElement("option");
    option2.innerHTML = "Option2";
    option2.value = "2";
    element2.appendChild(option2, null);
    cell3.appendChild(element2);
}

mohankittu · Accepted Answer · 2014-12-17 08:37:26Z

  **Script**  
 $(".Add").click(function () {
                if (numberOfRows == 3) {
                    alert('No of rows cannot be more than 3 rows!!');
                    return;
                }
                $(".tbl").append(newRow);
                ddlEditSelected = '0';
                numberOfRows++;
            });




            var newRow = "<tr><td><select class='status1' id='ddlStatus' onchange='ddlChange(this,0);'> <option value='0'>--Select--</option><option value='1'>Priority/Severity1</option>" +
                           "<option value='2'>Priority/Severity2</option>" +
                           "<option value='3'>Priority/Severity3</option></select>" +
                           "<td><input type='text' class='response1' id='txtResponse' name='Response' maxlength='6' onkeypress='return isNumberKey(event)' onblur='return checkvalidation(this)' /></td>" +
                           "<td><input type='text' class='resolution1' id='txtResolution' name='Resolution' maxlength='6' onkeypress='return isNumberKey(event)' onblur='return checkvalidation(this)'/></td>" +
                           "<td><input type='text' class='targetLevel1' id='txtTargetLevel' name='TargetLevel' maxlength='6' onkeypress='return isNumberKey(event)' onblur='return checkvalidation(this)'/></td></td></tr>"
            //$('.response').numeric();
        });

    **Html**
    <table width="100%" id="qualitygoal" class="tbl">
                <tbody>
                    <tr>
                        <th align="center">Priority/Severity</th>
                        <th align="center">Response SLA (in hrs)</th>
                        <th>Resolution SLA (in hrs)</th>
                        <th>Target Service Level (%)</th>

                    </tr>

                    @foreach (var data in Model)
                    {
                        <tr>
                            <td>
                                <span class="spanStatus" id="[email protected]" prorityID = "@data.Priority">@data.PriorityValue</span>
                                <select class="status" id="[email protected]">
                                    <option value="0">--Select--</option>
                                    <option value="1">Priority/Severity1</option>
                                    <option value="2">Priority/Severity2</option>
                                    <option value="3">Priority/Severity3</option>
                                </select>
                            </td>
                            <td>
                                <span class="spanResponse" id="[email protected]" >@data.Response</span>
                                <input class="response" id="[email protected]" type="text" value="@data.Response" maxlength="6" onkeypress="return isNumberKey(event)" onblur="return checkvalidation(this)" />
                            </td>
                            <td>
                                <span class="spanResolution" id="[email protected]">@data.Resolution</span>
                                <input class="resolution" id="[email protected]" type="text"  value="@data.Resolution" maxlength="6" onkeypress="return isNumberKey(event)" onblur="return checkvalidation(this)"   />
                            </td>
                            <td>
                                <span class="spantargetLevel" id="[email protected]">@data.TargetLevel</span>
                                <input class="targetLevel" id="[email protected]" type="text"  value="@data.TargetLevel" maxlength="6" onkeypress="return isNumberKey(event)" onblur="return checkvalidation(this)"   />
                            </td>
                            <td>
                                <table style="width: 100%;">
                                    <tr>
                                        <td>
                                            <input class="edit" id="[email protected]" type="button" value="Edit"  />
                                            <input class="update" id="[email protected]" type="button" value="Update"  />
                                        </td>
                                        <td class="Gcancle" id="[email protected]">
                                            <input class="gridcancel" id="[email protected]" type="button" value="Cancel"  />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table style="width: 100%;">
                                    <tr>
                                        <td>
                                            <input class="delete" id="[email protected]" type="button" value="Delete"  />
                                        </td>
                                    </tr>
                                </table>
                            </td>

                        </tr>

                    }
                </tbody>
            </table>


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

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

        </div>

Collectives™ on Stack Overflow

Adding dropdown list to new row on button click

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related