Question

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

/* 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代码模板，而不是在javascript中粘贴html代码，这很难维护。

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

Answer 2

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

＆＃13;

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

＆＃13;

input[type="file"] {
    display: block;
    width: 188px;
}
.browse-btn-td{
  width:56%;
}
.has-feedback .form-control {
  padding:0 15px !important;
}

＆＃13;

<!-- 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 -->

＆＃13;

Answer 3

要做的简单事情是使用以下css将该类应用于该标记：

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

这是完成任务的正确方法

如何在Bootstrap表中的输入文件旁边的列中定位按钮

3 个答案: