javascript - 如何在 Bootstrap 表中输入文件旁边的列中放置按钮

Question

我在 Bootstrap 3 中有一个表，每行有 3 个输入。我需要放置一个删除行按钮(这是一个带有 btn btn-danger 类的 anchor 元素)，但我无法将 anchor 按钮放置在最后一列中输入文件元素的旁边(右侧)。该按钮位于输入下方。请任何帮助，将不胜感激

/* 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 -->

Answer 1

文件输入框需要使用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++;