2

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/

4

5 回答 5

7

尝试使用 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>
于 2013-06-24T05:42:30.923 回答
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);
}

更新小提琴：

问题在于注释行。select元素不是input元素。你不能有一个<input type="select"/>. 由于 anHTMLInputElement没有add方法，因此addRow引发了异常。

于 2013-06-24T05:44:21.440 回答
1

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

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>
于 2013-06-24T05:58:08.907 回答
0 
  **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>
于 2014-12-17T08:37:26.687 回答
0

这种解决了你的问题

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);
}
于 2013-06-24T05:41:17.747 回答