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

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，试试这可能会对您有所帮助。

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

Answer 3

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

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

这是完成任务的正确方法