单击按钮将下拉列表添加到新行
Adding dropdown list to new row on button click
我正试图在单击按钮时添加新行。在我的新行中，我试图添加一个文本框和一个下拉列表。我不知道我做错了什么？有人能帮我解决这个问题吗。提前谢谢。
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);
}
JSFiddlehttp://jsfiddle.net/wAyhm/2/
使用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>
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);
}
更新Fiddle:
注释行出现问题。select元素不是input元素。你不能有<input type="select"/>。由于HTMLInputElement没有add方法，addRow引发了异常。
您可以通过以下代码添加任意数量的行
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>
这种方法解决了的问题
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);
}
**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>
相关文章：
- 拆分文本以每隔n个字符添加一行新行，并注意空格
- 如何在脚本上添加新行
- 在不刷新整个网格的情况下，向Asp.net网格视图添加新行
- dhtmlx添加新行并启动单元格编辑器
- 在新行(html）中动态添加更多文本字段
- 如何在Google Geochart图表的工具提示文本中添加新行
- 为什么要将此p标记添加为新行
- Jquery在表WITH函数中追加新行后添加单击事件
- 无法编辑添加的新行
- 如何在javascript中每次添加新行时都增加ordre值
- 将新行添加到localStorage变量中
- 当上一行/当前行被填充时，将新行添加到HTML表中
- 当新行添加到表中时，使用AJAX更新页面
- 将新行添加到数据库时的 Javascript 警报
- 为 HTML 文本区域中的新行添加效果
- 将新行添加到空的剑道网格中
- 单击按钮时，将新行添加到包含下拉列表的表中
- 向输出空间或新行添加新行或空格
- 使用2下拉列表将新行添加到表中-如何更改选择的名称
- 为按钮创建的每个新行添加i++
