4
부트 스트랩 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 -->
내 코드를 시도 할 옳은 일 ,이 도움이 될 수 있습니다, 나는 당신의 코드를 일부 CSS로 업데이트했습니다. –