1

Tengo la siguiente tabla donde la puedo ordenar pero en el css me gustaria poder que los glyphicon quedaran uno arriba del otro.

$(document).ready(function() {
$("#btn_save_line").click(function() {
   
      var newRow = document.getElementById('tbl_cotizacion').insertRow();
      newRow.innerHTML = "<tr><td align='center'>1 </td><td>2</td><td>3</td><td> <button class='btn btn-danger btn-sm'>x </button> <span class='glyphicon glyphicon-chevron-up arriba'></span>  <span class='glyphicon glyphicon-chevron-down down abajo'> </span></td></tr>";
 

});
    $(document).on("click", ".arriba,.abajo", function(){
      
    var row = $(this).parents("tr:first");
    if ($(this).is(".arriba")) {
        row.insertBefore(row.prev());
    } else {
        row.insertAfter(row.next());
    }
});
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


       <button type="button" class="btn btn-primary" id="btn_save_line" >Agregar</button>
     <table id="tbl_cotizacion" class="table table-bordered table-sm" cellspacing="0" width="100%">
          <thead>
              <tr class="table-warning">
                  <th width="5%"># Indicador</th>
                  <th width="5%">Cantidad</th>
                  <th width="10%">Componente</th>
                  <th width="5%"></th>
              </tr>
          </thead>
          <tbody>
              <tr>
                <td> </td>
                <td> 4 </td>
                <td> Falso </td>
                <td> <button class='btn btn-danger btn-sm'>x </button> <span class='glyphicon glyphicon-chevron-up arriba'></span>  <span class='glyphicon glyphicon-chevron-down down abajo'> </span>  </td>
              </tr>
              <tr>
                <td> </td>
                <td> 5 </td>
                <td> Falso </td>
                <td> <button class='btn btn-danger btn-sm'>x </button> <span class='glyphicon glyphicon-chevron-up arriba'></span>  <span class='glyphicon glyphicon-chevron-down down abajo'> </span> </td>
              </tr>

          </tbody>
      </table>

1
  • buenas Mote. Supongo que te refieres a las flechas ..Puedes mostrar lo que has intentado para que queden como deseas? Nosotros ayudamos sobre tus errores o problemas, no hacemos tareas :P Mira ejemplo mínimo verificable para más info. Un saludo
    – lois6b
    Commented el 5 mar. 2019 a las 14:30

2 respuestas 2

3

Los span son elementos inline por lo que siempre se ubicarán uno al lado del otro. Solo tienes que cambiarle el display a block y se mostrarán uno encima de otro. El problema es que en esa misma linea tienes un botón por lo que debes hacer con CSS una estructura de tabla para que los elementos se ubiquen uno al lado del otro; yo use un flex y listo pero puede que necesites mas ajustes si quieres añadir más cosas.

Básicamente necesitas agrupar las flechas en un solo elemento y mostrar el botón al lado de este elemento contenedor. Como estás dentro de la celda de una tabla yo usé otro elemento para ordenar con el flex.

$(document).ready(function() {
  $("#btn_save_line").click(function() {

    var newRow = document.getElementById('tbl_cotizacion').insertRow();
    newRow.innerHTML = "<tr><td align='center'>1 </td><td>2</td><td>3</td><td><div class='actions'><button class='btn btn-danger btn-sm'>x </button><div class='arrows'><span class='glyphicon glyphicon-chevron-up arriba'></span><span class='glyphicon glyphicon-chevron-down down abajo'> </span></div></div></td></tr>";


  });
  $(document).on("click", ".arriba,.abajo", function() {

    var row = $(this).parents("tr:first");
    if ($(this).is(".arriba")) {
      row.insertBefore(row.prev());
    } else {
      row.insertAfter(row.next());
    }
  });
});
.actions {
  display: flex;
}

.arrows {
  text-align: middle;
  margin-left: 2px;
}

.arriba {
  margin-left: 1px;
}

.glyphicon.glyphicon-chevron-up.arriba,
.glyphicon.glyphicon-chevron-down.abajo {
  display: block;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary" id="btn_save_line">Agregar</button>
<table id="tbl_cotizacion" class="table table-bordered table-sm" cellspacing="0" width="100%">
  <thead>
    <tr class="table-warning">
      <th width="5%"># Indicador</th>
      <th width="5%">Cantidad</th>
      <th width="10%">Componente</th>
      <th width="5%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> </td>
      <td> 4 </td>
      <td> Falso </td>
      <td>
        <div class="actions">
          <button class='btn btn-danger btn-sm'>x </button>
          <div class="arrows">
            <span class='glyphicon glyphicon-chevron-up arriba'></span>
            <span class='glyphicon glyphicon-chevron-down down abajo'> </span>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td> </td>
      <td> 5 </td>
      <td> Falso </td>
      <td>
        <div class="actions">
          <button class='btn btn-danger btn-sm'>x </button>
          <div class="arrows">
            <span class='glyphicon glyphicon-chevron-up arriba'></span>
            <span class='glyphicon glyphicon-chevron-down down abajo'> </span>
          </div>
        </div>
      </td>
    </tr>

  </tbody>
</table>

1

Con display: inline-flex se soluciona facilmente, creo que algo así es lo que necesitas

$(document).ready(function() {
$("#btn_save_line").click(function() {
   
      var newRow = document.getElementById('tbl_cotizacion').insertRow();
      newRow.innerHTML = "<tr><td align='center'>1 </td><td>2</td><td>3</td><td><button class='btn btn-danger btn-sm'>x </button> <span class='wrap-icons'><span class='glyphicon glyphicon-chevron-up arriba'></span><span class='glyphicon glyphicon-chevron-down down abajo'></span><span></td></tr>";
 

});
    $(document).on("click", ".arriba,.abajo", function(){
      
    var row = $(this).parents("tr:first");
    if ($(this).is(".arriba")) {
        row.insertBefore(row.prev());
    } else {
        row.insertAfter(row.next());
    }
});
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style>
.wrap-icons{
  display: inline-flex;
  flex-direction: column;
}
</style>


       <button type="button" class="btn btn-primary" id="btn_save_line" >Agregar</button>
     <table id="tbl_cotizacion" class="table table-bordered table-sm" cellspacing="0" width="100%">
          <thead>
              <tr class="table-warning">
                  <th width="5%"># Indicador</th>
                  <th width="5%">Cantidad</th>
                  <th width="10%">Componente</th>
                  <th width="5%"></th>
              </tr>
          </thead>
          <tbody>
              <tr>
                <td> </td>
                <td> 4 </td>
                <td> Falso </td>
                <td> 
                  <button class='btn btn-danger btn-sm'>x </button> 
                  <span class="wrap-icons">
                    <span class='glyphicon glyphicon-chevron-up arriba'></span>  
                    <span class='glyphicon glyphicon-chevron-down down abajo'></span>
                  <span>  
                </td>
              </tr>
              <tr>
                <td> </td>
                <td> 5 </td>
                <td> Falso </td>
                <td> 
                  <button class='btn btn-danger btn-sm'>x </button> 
                  <span class="wrap-icons">
                    <span class='glyphicon glyphicon-chevron-up arriba'></span>  
                    <span class='glyphicon glyphicon-chevron-down down abajo'></span>
                  <span>  
                </td>
              </tr>

          </tbody>
      </table>

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.