2016-12-28 74 views
4

我在Bootstrap 3中有一个表,每行有3个输入。我需要定位一个删除行按钮(这是一个具有类btn btn-danger的锚点元素),但我无法将锚点按钮放在最后一列输入文件元素旁边(在右侧)。该按钮位于输入的下方。请任何帮助,这将是gratefull如何在Bootstrap表中的输入文件旁边的列中定位按钮

/* inicio del bloque que agrega una fila a la tabla */ 
 
     
 
    var conteo = 1; 
 
    $("#add_row").click(function() { 
 
     
 
    if(conteo<10 || $('.ruttabl1').length < 10) { 
 
      
 
$('#tab_logic').append('<tr id="addr'+(conteo)+'"></tr>'); 
 
$('#addr'+conteo).html("<td class='order'>"+ (conteo) +"</td> <td> <div class='form-group has-feedback col-md-12'> <input name='nombres_s1t1_array["+conteo+"]' id='nombre_s1t1_"+conteo+"' type='text' placeholder='Ingrese nombre completo' class='form-control txtVal' required><span class='glyphicon form-control-feedback' id='nombre_s1t1_"+conteo+1+"'></span></div></td> <td> <div class='form-group has-feedback col-md-10'> <input name='ruts_s1t1_array["+conteo+"]' id='rut_s1t1_"+conteo+"' type='text' maxlength='12' placeholder='Ingrese RUT' class='form-control ruttabl1' required> <span class='glyphicon form-control-feedback' id='rut_s1t1_"+conteo+1+"'></span></div></td> <td> <div class='form-group has-feedback col-md-11'><input type='file' id='archivo_s1t1_array"+conteo+"' name='archivo_s1t1_array["+conteo+"]' required> <span class='glyphicon form-control-feedback' id='archivo_s1t1_array"+conteo+1+"'></span> <a class='btn-remove-tr btn btn-danger' style='float:left'>Delete row</a> <div id='errorBlock"+conteo+"' class='help-block'></div> <span id='fileErrorValidMsg"+conteo+"' class='file-val-error'></span><br><span style='color:red'></span> </div> </td>"); 
 
          
 
    conteo++; 
 
      
 
    /* inicio actualizacion numeros de filas */ 
 
    if($('#tab_logic tr').length > 1) { 
 
     $(this).closest('tr').remove(); 
 
     $('#tab_logic td.order').text(function (i) { return i + 1; }); 
 
        } 
 
    /* fin actualizacion numeros de fila */ 
 
         
 
     } 
 
    
 
    
 
    }); 
 
    
 
/* cierre del bloque que agrega una fila a la tabla */ 
 

 
    /* inicio bloque de eliminación de fila de la tabla */ 
 

 
     
 
     var i = $('#tab_logic tr').length; 
 
     $('#tab_logic').on('click', '.btn-remove-tr', function(e) { 
 
     e.preventDefault(); 
 
       
 
     if($('#tab_logic tr').length>1) { 
 
      $(this).closest('tr').remove(); 
 
      $('td.order').text(function (i) { 
 
       return i + 1; 
 
      }); 
 
     } 
 
     
 
     if($('#tab_logic tr').length<10) { $('#add_row').show(); } 
 
     return false; 
 
     }); 
 
    /* fin bloque de eliminación de fila de la tabla */
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.js"> 
 
</script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<!-- inicio tabla --> 
 
           
 

 
    <div class="row clearfix "> 
 
    
 
     
 
      <div class="col-md-12 column"> 
 
      <label class="control-label"><p><small>5. Nombre(s) y RUTs y Archivos (*)</small></p></label> 
 
       <table class="table table-bordered table-hover table-striped table-sm" id="tab_logic" cellspacing="0" width="100%"> 
 

 
        
 
        <thead class="thead-inverse bg-primary"> 
 
         <tr class="cabecera"> 
 
          <th class="text-center"><p>#</p></th> 
 
          <th class="text-center"><p>Nombre Completo (*)</p></th> 
 
          <th class="text-center"><p>RUT (*)</p></th> 
 
          <th class="text-center"> 
 
          <p> 
 
           Adjuntar documento (*) 
 
           </p> 
 
          </th> 
 
          
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         
 
        <tr id="addr0"> 
 
         <td class="order"> 
 
         1 
 
         </td> 
 
         <td> 
 
          <div class="form-group has-feedback col-md-12"> 
 
           <input type="text" id="nombre_s1t1_0" name="nombres_s1t1_array[0]" placeholder="Ingrese nombre completo" class="form-control" required> 
 
           <span class="glyphicon form-control-feedback" id="nombre_s1t1_01"></span> 
 
          </div> 
 
         </td> 
 

 
         
 
         <td> 
 
         
 
          <div class="form-group has-feedback col-md-10"> 
 
          <input type="text" name="ruts_s1t1_array[0]" id="rut_s1t1_0" placeholder="Ingrese RUT" maxlength="12" class="form-control ruttabl1" required> 
 

 
          <span class="glyphicon form-control-feedback" id="rut_s1t1_01"></span> 
 

 
         
 
           </div>  
 
         </td> 
 

 
         <td> 
 

 
          <div class="form-group has-feedback col-md-11"> 
 
           <input type="file" id="archivo_s1t1_array0" name="archivo_s1t1_array[0]" required> 
 

 
           <div id="errorBlock0" class="help-block"></div> 
 
           <span id="fileErrorValidMsg0" class="file-val-error"></span> 
 
          
 
          </div> 
 

 
         </td> 
 

 
        </tr> 
 
        
 
             
 
       </tbody> 
 
       </table> 
 
     </div> 
 
    </div> 
 
        
 
           
 
     <div style="float:right"> 
 
      <a id="add_row" class="btn btn-primary addnewrow pull-left">Agregar fila 
 
      <span class="glyphicon glyphicon-plus"></span> 
 
      </a> 
 
     </div> 
 

 

 
     </br> </br> 
 
<!-- fin tabla -->

+0

试试我的代码正确的事,可能这会帮助你,我用一些CSS更新了你的代码 –

回答

0

文件输入字段需要使用display:inline-block和需要删除的按钮样式float:left;。另外,我建议你建立一个html代码模板,而不是将html代码粘贴到很难维护的javascript中。

/* inicio del bloque que agrega una fila a la tabla */ 

    var conteo = 1; 
    $("#add_row").click(function() { 

    if(conteo<10 || $('.ruttabl1').length < 10) { 

$('#tab_logic').append('<tr id="addr'+(conteo)+'"></tr>'); 
$('#addr'+conteo).html("<td class='order'>"+ (conteo) +"</td> <td> <div class='form-group has-feedback col-md-12'> <input name='nombres_s1t1_array["+conteo+"]' id='nombre_s1t1_"+conteo+"' type='text' placeholder='Ingrese nombre completo' class='form-control txtVal' required><span class='glyphicon form-control-feedback' id='nombre_s1t1_"+conteo+1+"'></span></div></td> <td> <div class='form-group has-feedback col-md-10'> <input name='ruts_s1t1_array["+conteo+"]' id='rut_s1t1_"+conteo+"' type='text' maxlength='12' placeholder='Ingrese RUT' class='form-control ruttabl1' required style='display:inline-block;'> <span class='glyphicon form-control-feedback' id='rut_s1t1_"+conteo+1+"'></span></div></td> <td> <div class='form-group has-feedback col-md-11'><input type='file' id='archivo_s1t1_array"+conteo+"' name='archivo_s1t1_array["+conteo+"]' required> <span class='glyphicon form-control-feedback' id='archivo_s1t1_array"+conteo+1+"'></span> <a class='btn-remove-tr btn btn-danger' >Delete row</a> <div id='errorBlock"+conteo+"' class='help-block'></div> <span id='fileErrorValidMsg"+conteo+"' class='file-val-error'></span><br><span style='color:red'></span> </div> </td>"); 

    conteo++; 
0

我刚刚根据您的要求更新了CSS,试试这可能会对您有所帮助。

/* inicio del bloque que agrega una fila a la tabla */ 
 
     
 
    var conteo = 1; 
 
    $("#add_row").click(function() { 
 
     
 
    if(conteo<10 || $('.ruttabl1').length < 10) { 
 
      
 
$('#tab_logic').append('<tr id="addr'+(conteo)+'"></tr>'); 
 
$('#addr'+conteo).html("<td class='order'>"+ (conteo) +"</td> <td> <div class='form-group has-feedback col-md-12'> <input name='nombres_s1t1_array["+conteo+"]' id='nombre_s1t1_"+conteo+"' type='text' placeholder='Ingrese nombre completo' class='form-control txtVal' required><span class='glyphicon form-control-feedback' id='nombre_s1t1_"+conteo+1+"'></span></div></td> <td> <div class='form-group has-feedback col-md-10'> <input name='ruts_s1t1_array["+conteo+"]' id='rut_s1t1_"+conteo+"' type='text' maxlength='12' placeholder='Ingrese RUT' class='form-control ruttabl1' required> <span class='glyphicon form-control-feedback' id='rut_s1t1_"+conteo+1+"'></span></div></td> <td class='browse-btn-td'> <div class='form-group has-feedback col-md-12'><div style='float:left;'><input type='file' id='archivo_s1t1_array"+conteo+"' name='archivo_s1t1_array["+conteo+"]' required> <span class='glyphicon form-control-feedback' id='archivo_s1t1_array"+conteo+1+"'></span></div><div style='float:right'> <a class='btn-remove-tr btn btn-danger' style='float:left'>Delete row</a></div><div style='clear:both;'></div> <div id='errorBlock"+conteo+"' class='help-block'></div> <span id='fileErrorValidMsg"+conteo+"' class='file-val-error'></span><br><span style='color:red'></span> </div> </td>"); 
 
          
 
    conteo++; 
 
      
 
    /* inicio actualizacion numeros de filas */ 
 
    if($('#tab_logic tr').length > 1) { 
 
     $(this).closest('tr').remove(); 
 
     $('#tab_logic td.order').text(function (i) { return i + 1; }); 
 
        } 
 
    /* fin actualizacion numeros de fila */ 
 
         
 
     } 
 
    
 
    
 
    }); 
 
    
 
/* cierre del bloque que agrega una fila a la tabla */ 
 

 
    /* inicio bloque de eliminación de fila de la tabla */ 
 

 
     
 
     var i = $('#tab_logic tr').length; 
 
     $('#tab_logic').on('click', '.btn-remove-tr', function(e) { 
 
     e.preventDefault(); 
 
       
 
     if($('#tab_logic tr').length>1) { 
 
      $(this).closest('tr').remove(); 
 
      $('td.order').text(function (i) { 
 
       return i + 1; 
 
      }); 
 
     } 
 
     
 
     if($('#tab_logic tr').length<10) { $('#add_row').show(); } 
 
     return false; 
 
     }); 
 
    /* fin bloque de eliminación de fila de la tabla */
input[type="file"] { 
 
    display: block; 
 
    width: 188px; 
 
} 
 
.browse-btn-td{ 
 
    width:56%; 
 
} 
 
.has-feedback .form-control { 
 
    padding:0 15px !important; 
 
}
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.js"> 
 
</script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<!-- inicio tabla --> 
 
           
 

 
    <div class="row clearfix "> 
 
    
 
     
 
      <div class="col-md-12 column"> 
 
      <label class="control-label"><p><small>5. Nombre(s) y RUTs y Archivos (*)</small></p></label> 
 
       <table class="table table-bordered table-hover table-striped table-sm" id="tab_logic" cellspacing="0" width="100%"> 
 

 
        
 
        <thead class="thead-inverse bg-primary"> 
 
         <tr class="cabecera"> 
 
          <th class="text-center"><p>#</p></th> 
 
          <th class="text-center"><p>Nombre Completo (*)</p></th> 
 
          <th class="text-center"><p>RUT (*)</p></th> 
 
          <th class="text-center"> 
 
          <p> 
 
           Adjuntar documento (*) 
 
           </p> 
 
          </th> 
 
          
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         
 
        <tr id="addr0"> 
 
         <td class="order"> 
 
         1 
 
         </td> 
 
         <td> 
 
          <div class="form-group has-feedback col-md-12"> 
 
           <input type="text" id="nombre_s1t1_0" name="nombres_s1t1_array[0]" placeholder="Ingrese nombre completo" class="form-control" required> 
 
           <span class="glyphicon form-control-feedback" id="nombre_s1t1_01"></span> 
 
          </div> 
 
         </td> 
 

 
         
 
         <td> 
 
         
 
          <div class="form-group has-feedback col-md-10"> 
 
          <input type="text" name="ruts_s1t1_array[0]" id="rut_s1t1_0" placeholder="Ingrese RUT" maxlength="12" class="form-control ruttabl1" required> 
 

 
          <span class="glyphicon form-control-feedback" id="rut_s1t1_01"></span> 
 

 
         
 
           </div>  
 
         </td> 
 

 
         <td> 
 

 
          <div class="form-group has-feedback col-md-11"> 
 
           <input type="file" id="archivo_s1t1_array0" name="archivo_s1t1_array[0]" required> 
 

 
           <div id="errorBlock0" class="help-block"></div> 
 
           <span id="fileErrorValidMsg0" class="file-val-error"></span> 
 
          
 
          </div> 
 

 
         </td> 
 

 
        </tr> 
 
        
 
             
 
       </tbody> 
 
       </table> 
 
     </div> 
 
    </div> 
 
        
 
           
 
     <div style="float:right"> 
 
      <a id="add_row" class="btn btn-primary addnewrow pull-left">Agregar fila 
 
      <span class="glyphicon glyphicon-plus"></span> 
 
      </a> 
 
     </div> 
 

 

 
     </br> </br> 
 
<!-- fin tabla -->

0

简单的事情类适用于标签与下面的CSS:

.cls-nm{ 
    position:absolute; 
    right:0; 
    top: 0; 
} 

这是做任务

相关问题