动态表的设计

Question

我有一个表，这个表的每一行都包含一组（输入，选择...）。 我第一次只显示表格的第一行，当我点击“icon plus”按钮时，我显示（make style.display = inline）第二行......等等 我的问题是：当我点击按钮“icon plus”时，会显示第二行，但第一行“第一行”的宽度会被修改！ （它变得更大） 点击“icon plus”之前： 后：

html代码：

 <div class="tab-pane active" id="horizontal-form">
							
                                   @using (Html.BeginForm("RechercheForm", "Recherche", FormMethod.Post, new { id = "SearchForm", @class = "" }))
                                   {
                                            <span class="input-group-btn">
										        <button class="btn btn-success" type="submit"><i class="fa fa-search icon-ser"></i></button>
									        </span>
                                            
                                             
                                            
                                                
                                            <table id="TableRech" class="table" >
                                              <tr>
                                
                                  
                                              </tr>
                                                @for (var i = 0; i < names.Count(); i++)
                                                {
                                                    
                                    
                                                    <tr id="TrToHide@(i + 1)">
                                                <td>

                                              <select   class="form-control1" id="Critere@(i + 1)" name="List[@(i)].Critere"  onchange="CleanCritere(@(i + 1),this);CallChangefunc(this.value,@(i + 1))"> <!-- some attrs=ibutes skipped --><option selected disabled value="">Aucun</option></select>
         
                                                </td>
                                                <td>
                            
                                               <select class="form-control1" id="Op@(i + 1)" name="List[@(i)].Op"   onchange="OnclickBetween(@(i + 1),this.value)"  > <!-- some attrs=ibutes skipped --><option selected disabled value="">Aucun</option></select>
         
                                                </td>
                             
                                                <td>
      
                                               <input class="form-control1" type="text" id="Val1@(i + 1)" name="List[@(i)].Val1" />
                                                </td>
                                                <td id="TdToHide@(i + 1)">
                                                    <input class="form-control1" type="text" id="Val2@(i + 1)" name="List[@(i)].Val2" />
      
                              
                                
                                                </td>
                                  
                                                  <td><span id="HidePlus@(i + 1)" class="glyphicon glyphicon-plus-sign"  style="width: 15px;" onclick="RechFunctionPlus()" ></span>
                                                  @if ((@i + 1) != 1)
                                                  {
                                                     <span id="HideMoins@(i + 1)" class="glyphicon glyphicon-minus-sign"  style="width: 15px;" onclick="RechFunctionMoins()" ></span>
                                   
                                                  }   
                                                      
                                                  </td>
                             
                                
                                
                                              </tr>
                                                    
                                                
                                                }
                              
                               
                                            </table>
                                            <input type="hidden" name="Counter" value="1" id="Counter" />
                            
                            
                            
                                   }
                            </div>
								
							  </div>

脚本：

 function RechFunctionPlus() {
         
         var Counter = document.getElementById("Counter");

         //Hide the + and - of the current line
         var IdPlus = document.getElementById("HidePlus" + Counter.value);
         IdPlus.style.display = "none";
         if (Counter.value != 1) {
             var IdMoins = document.getElementById("HideMoins" + Counter.value);
             IdMoins.style.display = "none";

         }
         //incrementer de 1
         $('#Counter').val(function (i, oldval) {
             return ++oldval;

         });

         var Tr = document.getElementById('TrToHide' + Counter.value)
         Tr.style.display = "inline";
         if (Counter.value == FormLineMax) {
              IdPlus = document.getElementById("HidePlus" + Counter.value);
             IdPlus.style.display = "none";
         }
        
         
         
         //Make required=true for all elements of the added line

         var Critere = document.getElementById('Critere' + Counter.value);
         var Op = document.getElementById('Op' + Counter.value);
         var Val1 = document.getElementById('Val1' + Counter.value);
         Critere.setAttribute('required', 'required');
         Op.setAttribute('required', 'required');
         Val1.setAttribute('required', 'required');








     }