如何在不丢失CSS的情况下生成动态文本框 [英] How do I generate dynamic textboxes without missing CSS

问题描述

 
在我的表单中，我有一个文本框其中可以放置一个整数通过单击旁边的按钮，它应该动态创建许多文本框作为表。 的jQuery代码  ：

 $（ ＃ContentPlaceHolder1_LnkBtnNoofItems）。click（ function （）{
 $（  .white-table-view-block）。removeClass（  hide）; 
 $（ ＃Table-id-Name)re​​moveClass(  hide）; 
 
 
 $（ ＃Table-id-Name）。each（ function （）{
  var  NumbRow = $（  #tx tNoofItems）VAL（）; 
  var  htmlvar = ' '; 
  for （i =  0 ; i< NumbRow; i ++）{
 htmlvar + = ' '; 
 htmlvar + = ' '; 
 htmlvar + = ' < input type =textid =item_number_input' + i + ' class =form-controlplaceholder =Number/>'; 
 htmlvar + = ' < input type =textid =item_des_input' + i + ' class =form-controlplaceholder =Number/>'; 
 htmlvar + = ' < input type =textid =item_quantity_input' + i + ' class =form-controlplaceholder =Pieces/>'; 
 htmlvar + = ' < input type =textid =item_cost_input' + i + ' class =form-controlplaceholder =$/>'; 
 htmlvar + = ' < input type =textid =item_total_input' + i + ' class =form-controlplaceholder =$/>'; 
 htmlvar + = ' < a id =item_action_btn' + i + ' class =delet-icon>< / a>'; 
 htmlvar + = ' '; 
} 
 
 $（'  .tbody-content'） .append（htmlvar）; 
 
 $（  .delet-icon）。click（ function （）{
 $（ this ）。parents（  tr）。remove（）; 
}）; 
}）; 
}）; 

文本框和链接按钮代码为：

 <   div    < span class =code-attribute> class   =  col-md-4 col-lg-2  >  
 <   div     class   =  number-of-item-block >  
 <   div     class   =  row >  
 <   div  < span class =code-attribute>   class   =  col-md-12 >  <   asp：label     runat   =  server    ID   =  lblNoofItems   < span class =code-attribute>文本  = 没有。项目行 >  <   / div  >  
 <   div     class   =  col-md-12 >  
 <   asp：TextBox     runat   =  server    class   =  form-control < span class =code-attribute>   id   =  txtNoofItems   占位符  =  ＃   >  <   asp：Linkbutton     runat   =  server    ID   =  LnkBtnNoofItems    class   =  btn btn-dark -blue >    
 <   div     class   =  row >  
 <   div     class   =  col-md-6 >  <   / div  >  
 <   div     class   =  col-md-6 >  <   / div  >  
 <   / div  >  
 < span class =code-keyword><   / div  >  
 <   / div  >  
 <   / div  >  
 <   / div  >  

请帮我解决这个问题



我尝试了什么：



我尝试过使用jQuery但我需要< asp： TextBox />这是一个服务器控件，因此无法使用客户端代码创建。通过在C＃中提供有关如何执行此操作的服务器端代码来帮助我。

解决方案

（ ＃ContentPlaceHolder1_LnkBtnNoofItems）。click（ function （）{

（< span class =code-string> .white-table-view-block）。removeClass（ hide）;

（ ＃Table-id-Name）。removeClass（ 隐藏）;

Hi,

In my we form, I have a textbox where an integer can be placed and by clicking the button next to it, It should dynamically create that many textboxes as a table. The jQuery code for which is:

$("#ContentPlaceHolder1_LnkBtnNoofItems").click(function () {
        $(".white-table-view-block").removeClass("hide");
        $("#Table-id-Name").removeClass("hide");


        $("#Table-id-Name").each(function () {
            var NumbRow = $("#txtNoofItems").val();
            var htmlvar = '';
            for (i = 0; i < NumbRow; i++) {
                htmlvar += '';
                htmlvar += ' ';
                htmlvar += '<input type="text" id="item_number_input' + i + '" class="form-control" placeholder="Number" />';
                htmlvar += '<input type="text" id="item_des_input' + i + '" class="form-control" placeholder="Number" />';
                htmlvar += '<input type="text" id="item_quantity_input' + i + '" class="form-control" placeholder="Pieces" />';
                htmlvar += '<input type="text" id="item_cost_input' + i + '" class="form-control" placeholder="$" />';
                htmlvar += '<input type="text" id="item_total_input' + i + '" class="form-control" placeholder="$" />';
                htmlvar += '<a id="item_action_btn' + i + '" class="delet-icon"></a>';
                htmlvar += '';
            }

            $('.tbody-content').append(htmlvar);

            $(".delet-icon").click(function () {
                $(this).parents("tr").remove();
            });
        });
    });

The textbox and link button code is:

<div class="col-md-4 col-lg-2">
                                <div class="number-of-item-block">
                                    <div class="row">
                                        <div class="col-md-12"><asp:label runat="server" ID="lblNoofItems" Text="No. of Item Rows"></div>
                                        <div class="col-md-12">
                                            <asp:TextBox runat="server" class="form-control" id="txtNoofItems" placeholder="#" > <asp:Linkbutton runat="server" ID="LnkBtnNoofItems" class="btn btn-dark-blue">
                                            <div class="row">
                                                <div class="col-md-6"></div>
                                                <div class="col-md-6"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

Please help me how to solve this

What I have tried:

I have tried using jQuery but I need <asp:TextBox /> which is a server control so can not be created using client side code. Help me by providing server side code in C# on how to do this.

解决方案

("#ContentPlaceHolder1_LnkBtnNoofItems").click(function () {

(".white-table-view-block").removeClass("hide");

("#Table-id-Name").removeClass("hide");

这篇关于如何在不丢失CSS的情况下生成动态文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！