在按钮单击时将下拉列表添加到新行答案

【问题标题】：Adding dropdown list to new row on button click在按钮单击时将下拉列表添加到新行
【发布时间】：2013-06-24 05:30:54
【问题描述】：

我正在尝试在按钮单击时添加新行。在我的新行中，我试图添加一个文本框和一个下拉列表。我不知道我做错了什么？任何人都可以帮我解决这个问题。提前致谢。

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 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;
已更正，但仍无法正常工作
element2.add(option1, null); 没有 .add 方法。

标签： javascript jquery html button drop-down-menu

【解决方案1】：

使用 jQuery 试试这个。但如果你想用 javascript 回答，请跳过我的回答。

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>

【讨论】：

如何添加要选择的选项？而且我必须添加多行，在实际问题中，表中已经有多行。我想在这种情况下它不会正常工作。我可能错了。
使用 jQuery 会简单易行。现在检查。用它来添加选项<option value="2">Option 2</option>
我会试试你的解决方案。你能建议类似问题的解决方案吗？ stackoverflow.com/questions/17255841/…

【解决方案2】：

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:

问题在于注释行。 select 元素不是 input 元素。你不能有<input type="select"/>。由于HTMLInputElement 没有add 方法，addRow 抛出异常。

【讨论】：

您能否为以下问题提出解决方案？ stackoverflow.com/questions/17255841/…
前两行是什么意思？ var parentRow = btn.parentNode.parentNode; var table = parentRow.parentNode;

【解决方案3】：

您可以通过以下代码添加任意数量的行

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>

【讨论】：

【解决方案4】：

这样解决了你的问题

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

【讨论】：

【解决方案5】：

  **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="lblStatus_@data.Id" prorityID = "@data.Priority">@data.PriorityValue</span>
                                <select class="status" id="ddlStatus_@data.Id">
                                    <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="lblResponse_@data.Id" >@data.Response</span>
                                <input class="response" id="txtResponse_@data.Id" type="text" value="@data.Response" maxlength="6" onkeypress="return isNumberKey(event)" onblur="return checkvalidation(this)" />
                            </td>
                            <td>
                                <span class="spanResolution" id="lblResolution_@data.Id">@data.Resolution</span>
                                <input class="resolution" id="txtResolution_@data.Id" type="text"  value="@data.Resolution" maxlength="6" onkeypress="return isNumberKey(event)" onblur="return checkvalidation(this)"   />
                            </td>
                            <td>
                                <span class="spantargetLevel" id="lblTargetLevel_@data.Id">@data.TargetLevel</span>
                                <input class="targetLevel" id="txtTargetLevel_@data.Id" 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="Edit_@data.Id" type="button" value="Edit"  />
                                            <input class="update" id="Update_@data.Id" type="button" value="Update"  />
                                        </td>
                                        <td class="Gcancle" id="Canc_@data.Id">
                                            <input class="gridcancel" id="Cancel_@data.Id" type="button" value="Cancel"  />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table style="width: 100%;">
                                    <tr>
                                        <td>
                                            <input class="delete" id="Delete_@data.Id" 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>

【讨论】：