javascript 单击按钮时将下拉列表添加到新行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17268564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-27 07:43:10 来源:igfitidea点击:
Adding dropdown list to new row on button click
提问by PhantomM
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
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:
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/
JSFiddle http://jsfiddle.net/wAyhm/2/
回答by
Try this using jQuery. But if u want answer in javascript then skip my answer.
使用 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>
回答by c.P.u1
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);
}
Problem was with the commented lines. A selectelement isn't an inputelement. You can't have a <input type="select"/>. Since an HTMLInputElementdoesn't have an addmethod, addRowthrew an exception.
问题在于注释行。甲select元素不是一个input元件。你不能有一个<input type="select"/>. 由于 anHTMLInputElement没有add方法，因此addRow抛出异常。
回答by PhantomM
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>
回答by mohankittu
**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>
回答by mohkhan
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);
}
