All geek questions in one place

How to place a button in a column next to an input file in a Bootstrap table

I have a table in Bootstrap 3 that has 3 entries per row. I need to place the delete line button (which is the bind element with the btn btn-danger class), but I cannot place the bind button next to (on the right side) the input file element in the last column. The button is located below the input. Please help, he will be grateful

/* 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 -->
Run codeHide result
+4
source share
3 answers

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 -->
Hide result
0

A simple thing to apply a class to this tag with the following css:

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

This is the right task to complete the task.

0
source

Source: https://habr.com/ru/post/1665057/

More articles:


All Articles