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/

Answer 1

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>

Answer 2

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);
}

Answer 3

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.

Answer 4

  **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="[e-mail]" prorityID = "@data.Priority">@data.PriorityValue</span>
                                <select class="status" id="[e-mail]">
                                    <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="[e-mail]" >@data.Response</span>
                                <input class="response" id="[e-mail]" type="text" value="@data.Response" maxlength="6" onkeypress="return isNumberKey(event)" onblur="return checkvalidation(this)" />
                            </td>
                            <td>
                                <span class="spanResolution" id="[e-mail]">@data.Resolution</span>
                                <input class="resolution" id="[e-mail]" type="text"  value="@data.Resolution" maxlength="6" onkeypress="return isNumberKey(event)" onblur="return checkvalidation(this)"   />
                            </td>
                            <td>
                                <span class="spantargetLevel" id="[e-mail]">@data.TargetLevel</span>
                                <input class="targetLevel" id="[e-mail]" 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="[e-mail]" type="button" value="Edit"  />
                                            <input class="update" id="[e-mail]" type="button" value="Update"  />
                                        </td>
                                        <td class="Gcancle" id="[e-mail]">
                                            <input class="gridcancel" id="[e-mail]" type="button" value="Cancel"  />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table style="width: 100%;">
                                    <tr>
                                        <td>
                                            <input class="delete" id="[e-mail]" 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>

Answer 5

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>