0

Deseo que todos los inputs y select queden alineados horizontalmente, y ojalá sin separación entre sí ya que se irán generando dinámicamente más líneas del mismo formulario y deben seguir quedando alineadas horizontalmente una bajo la siguiente añadida dinámicamente.

Tengo solamente el encabezado en formato de tabla, pero los input y select no los puedo colocar dentro de tablas ni otros div's por tema de nodos jQuery (padre-hijo) para que funcione el append que agrega las siguientes líneas dinámicas.

El contenedor tiene la clase bootstrap .table-responsive para que haga scroll horizontal y no corte las líneas, pero solamente el encabezado (tabla) se mantiene horizontal, pero en los inputs/select se corta y se alinean en una siguiente fila visible.

¿Cómo hacer para que los input y select sigan la misma línea horizontal hasta el final y queden alineados bajo el encabezado de manera que se vea como si fuera un excel?

Así es como se ve actualmente mi línea de inputs cortada:

introducir la descripción de la imagen aquí

Se puede ver en el siguiente enlace: https://to-eg.servicomf5.com/quotation/packing_list En amarillo es la dirección que deseo lograr, y en rojo es hacia donde se ordenan actualmente. Sólo los primeros input quedan ajustados con el encabezado porque les he dado el mismo width, y a los restantes también, solo que los muestra hacia abajo y no hacia al lado. Mi código es el siguiente:

    <div class="table table-responsive">
            <table class="pl">
                <thead>
                    <tr class="over">
                        <th><div class="size15">#</div></th>
                        <th><div class="size100"><?=$this->lang->line('quotation_item_po');?></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_item_po_desc');?></div></th>
                        <th><div class="size100"><?=$this->lang->line('quotation_item_item');?></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_item_item_desc');?></div></th>
                        <th><div class="size100"><?=$this->lang->line('quotation_item_sitem');?></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_item_sitem_desc');?></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_shipment_type');?></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_package_type');?></div></th>
                        <th><div class="size100"><?=$this->lang->line('quotation_quantity_pieces');?></div></th>
                        <th colspan="2"><div class="size200"><?=$this->lang->line('quotation_item_weight');?></div></th>
                        <th colspan="2"><div class="size200"><?=$this->lang->line('quotation_item_length');?></div></th>
                        <th colspan="2"><div class="size200"><?=$this->lang->line('quotation_item_width');?></div></th>
                        <th colspan="2"><div class="size200"><?=$this->lang->line('quotation_item_height');?></div></th>
                        <th colspan="2"><div class="size225"><?=$this->lang->line('quotation_item_volume');?></div></th>
                        <th><div class="size150"><a href="https://www.foreign-trade.com/reference/hscode.htm" target="_blank"><?=$this->lang->line('quotation_commodity');?></a></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_hazardous');?></div></th>
                        <th><div class="size150"><a href="https://en.wikipedia.org/wiki/Lists_of_UN_numbers" target="_blank"><?=$this->lang->line('quotation_un_number');?></a></div></th>
                        <th><div class="size150"><a href="https://www.searates.com/reference/imo/" target="_blank"><?=$this->lang->line('quotation_imo_class');?></a></div></th>
                        <th><div class="size200"><?=$this->lang->line('quotation_storage_cond');?></div></th>
                        <th></th>
                    </tr>
                </thead>
            </table>

    <div id="filas">
        <div id="fila-1">
            <input type="text" value="" name="id[]" class="size27">
            <input type="text" maxlength="100" value="" name="po[]" class="size110">
            <input type="text" maxlength="100" value="" name="po_desc[]" class="size160">
            <input type="text" maxlength="100" value="" name="item[]" class="size110">
            <input type="text" maxlength="100" value="" name="item_desc[]" class="size160">
            <input type="text" maxlength="100" value="" name="sub_item[]" class="size110">
            <input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160">
            <select name="shipment_type[]" class="select2" data-style="null" data-width="fit" data-container="body" title="<?=$this->lang->line('quotation_single_select');?>" style="width:260px">
               <option></option>
                <option value="1"><?=$this->lang->line('quotation_shipment_type_1');?></option>
                <option value="2"><?=$this->lang->line('quotation_shipment_type_2');?></option>
                <option value="3"><?=$this->lang->line('quotation_shipment_type_3');?></option>
            </select>
            <select name="package_type[]" class="select2 size160" data-width="fit" data-container="body" title="<?=$this->lang->line('quotation_single_select');?>" data-style="null" data-size="10" data-live-search="true" style="width: 100%">
               <option></option>
...

Y el CSS para que quede de esa forma es el siguiente:

table, input, select {
    border-collapse: collapse;
    border: 1px solid #ccc;
}
.table th { 
    background: #11A7DB; 
    color: white; 
    font-weight: bold;
    vertical-align: top !important;
    padding: 6px;
}
.table td, .table th { 
    border: 1px solid #ccc; 
    text-align: left;
    white-space: pre; /* CSS 2.0 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3.0 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP */
    word-wrap: break-word; /* IE 5+ */
}
.pl td {
    height: 22px;
}
.over {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}        
input {
    height: 30px;
    width: 100%;
    font-family: Calibri;
    font-size: 14px;
    padding: 0 0 0 0px;
}        
input:focus {
    border: 2px solid #11A7DB;
    outline: none;
}
.center{
  text-align: center !important;
}
.row {
    margin-left: 0px;
    margin-right: 0px;
}        
.form-group {
    padding-left: 0px;
    padding-right: 0px;
}        
label{
    text-transform: none;
}
.size15{
  width: 15px;
}
.size27{
  width: 27px;
}
.size40{
  width: 40px;
}
.size100{
  width: 100px;
}        
.size110{
  width: 110px;
}        
.size135{
  width: 135px;
} 
.size150{
  width: 150px;
} 
.size160{
  width: 160px;
}   
.size200{
  width: 200px;
}   
.size210{
  width: 210px;
}  
.size225{
  width: 225px;
}

1 respuesta 1

0

Buenas amigo espero esto sea lo que buscas saludos

con jquery agregamos por cada click un tr a la tabla que es un string de ECMAscript 6 y en este caso lo compila babel espero te ayude

Le agregue la funcionalidad de eliminar el tr

para poder eliminar un elemento del DOM que al iniciar no exista y que agregamos dinamicamente tenemos que hacer uso de on que no agrega una "funccion de escuchar" que nos refleja todos los elementos dentro de un nodo sean nuevos o viejos

var newTr = `
<tr>
<td><button class="eliminarTr" type="button" name="button">X</button></td>
  <td><input type="text" value="" name="id[]" class="size27"></td>
  <td><input type="text" maxlength="100" value="" name="po[]" class="size110"></td>
  <td><input type="text" maxlength="100" value="" name="item[]" class="size110"></td>
  <td><input type="text" maxlength="100" value="" name="item_desc[]" class="size160"></td>
  </td><input type="text" maxlength="100" value="" name="sub_item[]" class="size110"></td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  <td>
  <select name="shipment_type[]" class="select2" data-style="null" data-width="fit" data-container="body" title="<?=$this->lang->line('quotation_single_select');?>" style="width:260px">
               <option></option>
                <option value="1"><?=$this->lang->line('quotation_shipment_type_1');?></option>
                <option value="2"><?=$this->lang->line('quotation_shipment_type_2');?></option>
                <option value="3"><?=$this->lang->line('quotation_shipment_type_3');?></option>
            </select>
  </td>
  <td>
     <select name="package_type[]" class="select2 size160" data-width="fit" data-container="body" title="<?=$this->lang->line('quotation_single_select');?>" data-style="null" data-size="10" data-live-search="true" style="width: 100%">
               <option></option>
               </select>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
</td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
  </td>
  <td><input type="text" maxlength="100" value="" name="sub_item_desc[]" class="size160"></td>
<tr>
`
$("#agregar").click(function(){
$(".pl").find("tbody").append(newTr)
})

$(".pl").on("click",".eliminarTr",function(){
  $(this).parents("tr").remove()
})
table, input, select {
    border-collapse: collapse;
    border: 1px solid #ccc;
}
.table th { 
    background: #11A7DB; 
    color: white; 
    font-weight: bold;
    vertical-align: top !important;
    padding: 6px;
}
.table td, .table th { 
    border: 1px solid #ccc; 
    text-align: left;
    white-space: pre; /* CSS 2.0 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3.0 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP */
    word-wrap: break-word; /* IE 5+ */
    padding:5px;
}
/*nuevo css*/
.table td input,.table td select {
  width: 100%;
  margin:0px !important;
  padding:5px;
  box-sizing: border-box;
}


.over {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}        
input {
    width: 100%;
    font-family: Calibri;
    font-size: 14px;
}        
input:focus {
    border: 2px solid #11A7DB;
    outline: none;
}
.center{
  text-align: center !important;
}
.row {
    margin-left: 0px;
    margin-right: 0px;
}        
.form-group {
    padding-left: 0px;
    padding-right: 0px;
}        
label{
    text-transform: none;
}
.size15{
  width: 15px;
}
.size27{
  width: 27px;
}
.size40{
  width: 40px;
}
.size100{
  width: 100px;
}        
.size110{
  width: 110px;
}        
.size135{
  width: 135px;
} 
.size150{
  width: 150px;
} 
.size160{
  width: 160px;
}   
.size200{
  width: 200px;
}   
.size210{
  width: 210px;
}  
.size225{
  width: 225px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table table-responsive">
            <table class="pl">
                <thead>
                    <tr class="over">
                    <th><div class="size15">X</div></th>
                        <th><div class="size15">#</div></th>
                        <th><div class="size100"><?=$this->lang->line('quotation_item_po');?></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_item_po_desc');?></div></th>
                        <th><div class="size100"><?=$this->lang->line('quotation_item_item');?></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_item_item_desc');?></div></th>
                        <th><div class="size100"><?=$this->lang->line('quotation_item_sitem');?></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_item_sitem_desc');?></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_shipment_type');?></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_package_type');?></div></th>
                        <th><div class="size100"><?=$this->lang->line('quotation_quantity_pieces');?></div></th>
                        <th colspan="2"><div class="size200"><?=$this->lang->line('quotation_item_weight');?></div></th>
                        <th colspan="2"><div class="size200"><?=$this->lang->line('quotation_item_length');?></div></th>
                        <th colspan="2"><div class="size200"><?=$this->lang->line('quotation_item_width');?></div></th>
                        <th colspan="2"><div class="size200"><?=$this->lang->line('quotation_item_height');?></div></th>
                        <th colspan="2"><div class="size225"><?=$this->lang->line('quotation_item_volume');?></div></th>
                        <th><div class="size150"><a href="https://www.foreign-trade.com/reference/hscode.htm" target="_blank"><?=$this->lang->line('quotation_commodity');?></a></div></th>
                        <th><div class="size150"><?=$this->lang->line('quotation_hazardous');?></div></th>
                        <th><div class="size150"><a href="https://en.wikipedia.org/wiki/Lists_of_UN_numbers" target="_blank"><?=$this->lang->line('quotation_un_number');?></a></div></th>
                        <th><div class="size150"><a href="https://www.searates.com/reference/imo/" target="_blank"><?=$this->lang->line('quotation_imo_class');?></a></div></th>
                        <th><div class="size200"><?=$this->lang->line('quotation_storage_cond');?></div></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>

   <button id="agregar" type="button" name="button">Agregar Nueva Fila</button>

4
  • Me funcionó muy bien @Luis! Muchas gracias, ahora me quedan 2 dudas: para eliminar esa línea que se inserta, en caso de que sea necesario, yo tenía el siguiente código '$( ".pl" ).on( "click", "button", function() { $(this).parent().remove(); });' Pero ahora no me funciona, ya que como está asociado al 'parent()' me elimina sólo el 'td' en el cual está contenido el botón, no el 'tr' completo. Lo otro, en el primer casillero va el valor 'id', ¿cómo puedo hacer que se autonumere en la medida que se van colocando dinámicamente más 'tr'? y aplicar 'disabled' a ese 'input'. Gracias!! el 1 dic. 2017 a las 20:28
  • ya te agregue la funcionalidad de eliminar prueba lo a ver si funciona el 1 dic. 2017 a las 23:46
  • Funciona perfecto @Luis, Muchas Gracias! Ahora a recolectar la información y guardarla en una BD MySQL con batch_insert (Codeigniter). el 2 dic. 2017 a las 2:55
  • excelente poder ayudarte amigo el 2 dic. 2017 a las 4:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.