Question

我的页面中有一个名为'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()再次显示内容则无法显示...

如何克服它？

Answer 1

只需在单选按钮更改中进行回发即可。因此它将清除JavaScript添加的内容并向页面添加默认内容。

或者为动态内容添加一个不同的类，并按类名删除它们。

$('dynamic-class').remove();

Answer 2

这个怎么样？

的 Live Demo

<强> 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>

Answer 3

您是否试图隐藏视图中的元素？

$("#BenefitsValue").empty();

删除内容。相反，使用

$("#BenefitsValue").hide();

然后您可以使用.show()将其恢复

Answer 4

您需要为动态添加的文本框创建不同的<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();

如何清除动态添加的div内容并仅显示div内容？

4 个答案: