[英]How to clear the dynamically added div contents and display only the div contents?
我的页面上有一个名为“ BenefitsValue”的div,显示设置为“无”。
<input id="Radio1" type="radio" name="bunit" value="1" onclick="onSample1()"
runat="server"/>Sample1
<input id="Radio2" type="radio" name="bunit" value="2" onclick="onSample2()"
runat="server"/>Sample2
<div id="BenefitsValue" style="display:none">
<table id="approverTable">
<tr id="rowtr" align="center">
<td>
<input type="text" id="From" size="11" maxlength="9"
class="gov-textbox" style="width: 100px;" />
</td>
<td>
<a id="addRangeLink" class="addRange" href="javascript:;"
onclick="AddTextBox();">AddRange</a>
</td>
</tr>
</table>
</div>
我将通过单击AddRange动态添加多个文本框。
function AddRange() {
var val = "";
var oTable = document.getElementById('approverTable');
var rowCount = oTable.rows.length;
var row = oTable.insertRow(rowCount);
var cell0 = row.insertCell(0);
var innerhtml;
cell0.innerHTML = '<input type="text" id="From' + rowCount
+ '" size="11" maxlength="9" class="gov-textbox" style="width: 100px;" />';
}
如果选择radiobutton1
,则将显示div
内容,并通过单击AddRange ...动态添加多个textboxes
。
然后,一旦我选择radiobutton2
它必须清除该div的新添加的textboxes
,并仅显示我在div中指定的单个text box
。
我用过$("#BenefitsValue").empty();
清除内容,但是如果我再使用$("#BenefitsValue").show()
再次显示它,则什么也不会显示...
如何克服呢?
只需在单选按钮更改中执行回发。 因此它将清除JavaScript添加的内容并将默认内容添加到页面。
否则,请为动态内容添加其他类,并通过类名称将其删除。
$('dynamic-class').remove();
这个怎么样?
JS
function AddRange() {
var val = "";
var oTable = document.getElementById('approverTable');
var rowCount = oTable.rows.length;
var row = oTable.insertRow(rowCount);
row.className='dynamic';
var cell0 = row.insertCell(0);
var innerhtml;
cell0.innerHTML = '<input type="text" id="From' + rowCount + '" size="11" maxlength="9" class="gov-textbox" style="width: 100px;" />';
}
function onSample1(){
$('#BenefitsValue').show();
}
function onSample2(){
$('.dynamic').remove();
}
HTML
<input id="Radio1" type="radio" name="bunit" value="1" onclick="onSample1()" runat="server"/>Sample1
<input id="Radio2" type="radio" name="bunit" value="2" onclick="onSample2()" runat="server"/>Sample2
<div id="BenefitsValue" style="display:none">
<table id="approverTable">
<tr id="rowtr" align="center">
<td>
<input type="text" id="From" size="11" maxlength="9" class="gov-textbox" style="width: 100px;" />
</td>
<td>
<a id="addRangeLink" class="addRange" href="javascript:;" onclick="AddRange();">AddRange</a>
</td>
</tr>
</table>
</div>
您是否要隐藏某个元素?
$("#BenefitsValue").empty();
删除内容。 相反,使用
$("#BenefitsValue").hide();
然后,您可以使用.show()
将其恢复
您需要为动态添加的文本框创建一个不同的<div>
。 例如:
<table id="approverTable">
<tr id="rowtr" align="center">
<td>
<input type="text" id="From" size="11" maxlength="9"
class="gov-textbox" style="width: 100px;" />
</td>
<td>
<a id="addRangeLink" class="addRange" href="javascript:;"
onclick="AddTextBox();">AddRange</a>
</td>
<td>
<div id="dynamicallyAddedTextBoxesGoHere">
</div>
</td>
</tr>
</table>
将您的文本框添加到$("#dynamicallyAddedTextBoxesGoHere")
。 然后在您的JavaScript中,您可以显示/隐藏该div-
$("#dynamicallyAddedTextBoxesGoHere").hide();
$("#dynamicallyAddedTextBoxesGoHere").show();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.