¿Cómo crear/generar dinámicamente filas en una tabla (table/html) en PHP/Laravel con información de una consulta AJAX?

publicado por: Anonymous

¿Cómo hacer para crear/generar dinámicamente filas en una tabla (table/html) que contiene 14 columnas donde cada una de ellas es un listbox y las 3 primeras(listbox’s o select’s) provienen de datos de una consulta Ajax y son select dependientes? mas o menos en el patron: padre, hijo, nieto.

El tema es que inicialmente la tabla solo tendría una sola fila. Al hacer click en un boton se debe generar o añadir una nueva fila a dicha tabla.

El detalle también está, quizás el punto principal y que no sé como enfocar, es que tanto la fila, como cada (select o listbox) y casi que, como cada celda de la tabla debe ser parametrizable. Es decir, luego de creada la fila, debo ser capaz de recuperar la información de la fila con los valores de dichos list box. Debería poder hacer referencia a una fila, a una columna.

A ver si con una imagen me explico mejor.

introducir la descripción de la imagen aquí

Y este sería mi código HTML que me generaría la tabla.

En principio solo debería aparecer una sola fila, pero para fines del post, he puesto tres filas.

La otra duda importante que me surge es si debo generar esa primera fila con html como aparece en el siguiente codigo y luego clonar esa fila para generar otra nueva ó debo generar esa primera fila ya directamente con javascript (tipo document.writeln("<table>"); document.writeln("<tr>") … y así sucesivamente construir la tabla.

De cualquier forma creo que la duda principal no solo es como pintar la fila como tal con todo lo que ello conlleva, sino luego, como recuperar los datos de cada una de las filas.

Supongo que de alguna forma se debe generar dinámicamente un id para cada fila o algo asi. Tipo idfila+variable

Pues en resumen es eso, la primera vez aparecerá una sola fila y al clickar en el boton de NUEVO OBJETIVO, se debe añadir-generar-crear una NUEVA FILA en la tabla html y todo lo que ello conlleva (generación de listbox, etc) para luego poder hacer referencia a CADA FILA Y CADA CELDA para por último recoger esa información y guardarla en la BBDD.

Estas son las dos funciones con las respetivas consultas ajax para cargar la info de la BBDD y poblar o pintar las select o listbox.

Ufff, que largo y complicado.
Espero haberme explicado medianamente bien.

_x000D_

_x000D_

//----------------------------select de TAREAS --------------------------_x000D_
        _x000D_
        $(".proyectoselect").change(function() {_x000D_
          $(".tareaselect").prop("disabled", false);_x000D_
          $('#tareaselect').empty();_x000D_
          $('#subtareaselect').empty(); _x000D_
          id_selected = $(this).val();_x000D_
          $.ajax({_x000D_
              type: "GET",_x000D_
              url: 'listartareas/'+id_selected, _x000D_
              dataType : 'text',_x000D_
              success: function(data){_x000D_
                  var datados = JSON.parse(data);_x000D_
                  $.each(JSON.parse(datados), function(key, value) {_x000D_
                       $('#tareaselect')_x000D_
                           .append($("<option></option>")_x000D_
                           .attr("value",value.id)_x000D_
                           .text(value.nombretarea)); _x000D_
                  });    _x000D_
              },_x000D_
              error: function(data) {_x000D_
                  alert('error');_x000D_
              }_x000D_
          });_x000D_
        }); _x000D_
_x000D_
//---------------------------select de SUBTAREAS --------------------------_x000D_
_x000D_
        $(".tareaselect").change(function() {_x000D_
          $(".subtareaselect").prop("disabled", false);_x000D_
          $('#subtareaselect').empty();_x000D_
          id_selected = $(this).val();_x000D_
          $.ajax({_x000D_
              type: "GET",_x000D_
              url: 'listartareas/'+id_selected, _x000D_
              dataType : 'text',_x000D_
              success: function(data){_x000D_
                  var datados = JSON.parse(data);_x000D_
                  $.each(JSON.parse(datados), function(key, value) {_x000D_
                       $('#subtareaselect')_x000D_
                           .append($("<option></option>")_x000D_
                           .attr("value",value.id)_x000D_
                           .text(value.nombretarea)); _x000D_
                  });    _x000D_
              },_x000D_
              error: function(data) {_x000D_
                  alert('error');_x000D_
              }_x000D_
          });_x000D_
        });

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<tr>_x000D_
          <td>_x000D_
            <!-- __________________SELECTOR DE PROYECTOS________________________ -->_x000D_
            <select  id="proyectoselect" class="proyectoselect js-example-basic-single-hide-search" data-width="160px">_x000D_
                <option>--- Proyectos ---</option>_x000D_
                @foreach($objetivos as $objetivo)_x000D_
                @if ($objetivo->padre===0)_x000D_
                  <option value="{{ $objetivo->id }}">{{ $objetivo->nombretarea }}</option>_x000D_
                @endif_x000D_
                @endforeach  _x000D_
            </select>_x000D_
          </td>_x000D_
_x000D_
          <td>_x000D_
          <!-- __________________SELECTOR DE TAREAS ________________________ -->_x000D_
            <select id="tareaselect" class="tareaselect js-example-basic-single-hide-search" data-width="160px">_x000D_
            </select>_x000D_
          </td>_x000D_
_x000D_
          <td>_x000D_
          <!-- __________________SELECTOR DE SUBTARRAS ________________________-->_x000D_
            <select id="subtareaselect" class="subtareaselect js-example-basic-single-hide-search " data-width="160px">_x000D_
            </select>_x000D_
          </td>_x000D_
          <td>_x000D_
            <!-- __________________SELECTOR DE LUNES ________________________-->_x000D_
              <select id="selectlun" class="selectlun js-example-basic-single" data-width="55px">_x000D_
                <option>-</option>_x000D_
                <option>1</option>_x000D_
            		._x000D_
            		._x000D_
            		._x000D_
            		._x000D_
_x000D_
                <option>5</option>_x000D_
               _x000D_
              </select>_x000D_
          </td>_x000D_
_x000D_
          <td>_x000D_
            <!-- __________________SELECTOR DE MARTES ________________________-->_x000D_
              <select id="selectmar" class="selectmar js-example-basic-single" data-width="55px">_x000D_
_x000D_
              </select>_x000D_
          </td>_x000D_
_x000D_
          <td>_x000D_
            <!-- __________________SELECTOR DE MIERCOLES ________________________-->_x000D_
              <select id="selectmie" class="selectmie js-example-basic-single" data-width="55px">_x000D_
                 <option>-</option>_x000D_
_x000D_
              </select>_x000D_
          </td>_x000D_
_x000D_
          <td>_x000D_
            <!-- __________________SELECTOR DE JUEVES ________________________-->_x000D_
              <select id="selectjue" class="selectjue js-example-basic-single" data-width="55px">_x000D_
                 <option>-</option>_x000D_
_x000D_
              </select>_x000D_
          </td>_x000D_
_x000D_
          <td>_x000D_
            <!-- __________________SELECTOR DE VIERNES ________________________-->_x000D_
              <select id="selectvie" class="selectvie js-example-basic-single" data-width="55px">_x000D_
                 <option>-</option>_x000D_
_x000D_
              </select>_x000D_
          </td>_x000D_
_x000D_
          <td>_x000D_
            <!-- __________________SELECTOR DE SABADO ________________________-->_x000D_
              <select id="selectsab" class="selectsab js-example-basic-single" data-width="55px">_x000D_
                 <option>-</option>_x000D_
              </select>_x000D_
          </td>_x000D_
          _x000D_
          <td>_x000D_
            <!-- __________________SELECTOR DE DOMINGO ________________________-->_x000D_
              <select id="selectdom" class="selectdom js-example-basic-single" data-width="55px">_x000D_
                 <option>-</option>_x000D_
              </select>_x000D_
          </td>_x000D_
_x000D_
          <td>_x000D_
              <button type="button" class="borrar btn btn-danger">_x000D_
                <span class="glyphicon glyphicon-remove"></span>_x000D_
              </button>_x000D_
          </td>_x000D_
_x000D_
          <td>_x000D_
              <button type="button" class="btn btn-info">_x000D_
                <span class="glyphicon glyphicon-ok"></span>_x000D_
              </button>_x000D_
              _x000D_
          </td>_x000D_
        </tr>

_x000D_

_x000D_

_x000D_

solución

Valla que larga es tu pregunta…
Pero bueno en esta comunidad estamos para ayudar, bueno pondré el código primero y luego paso a explicarte vale.

Primero de el html

<html>
   <head>
   <title></title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   <body>
      <table class="table table-bordered" id="mytable">
        <tr style="display:none;">
      <td>
        <!-- __________________SELECTOR DE PROYECTOS________________________ -->
        <select  class="proyectoselect js-example-basic-single-hide-search" name="proyectoselect[]" data-width="160px">
            <option>--- Proyectos ---</option>
             @foreach($objetivos as $objetivo)
            @if ($objetivo->padre===0)
              <option value="{{ $objetivo->id }}">{{ $objetivo->nombretarea }}</option>
            @endif
            @endforeach

        </select>
      </td>

      <td>
      <!-- __________________SELECTOR DE TAREAS ________________________ -->
        <select name="tareaselect[]" class="tareaselect js-example-basic-single-hide-search" data-width="160px" disabled="">
        <option>--Tareas--</option>
        </select>
      </td>

      <td>
      <!-- __________________SELECTOR DE SUBTARRAS ________________________-->
        <select name="subtareaselect[]" class="subtareaselect js-example-basic-single-hide-search " data-width="160px" disabled>
        <option>--SubTareas--</option>
        </select>
      </td>
      <td>
        <!-- __________________SELECTOR DE LUNES ________________________-->
          <select name="selectlun[]" class="selectlun js-example-basic-single" data-width="55px">
            <option>-</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
      </td>

      <td>
        <!-- __________________SELECTOR DE MARTES ________________________-->
          <select name="selectmar[]" class="selectmar js-example-basic-single" data-width="55px">
          <option>-</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
      </td>

      <td>
        <!-- __________________SELECTOR DE MIERCOLES ________________________-->
          <select name="selectmie[]" class="selectmie js-example-basic-single" data-width="55px">
             <option>-</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
      </td>

      <td>
        <!-- __________________SELECTOR DE JUEVES ________________________-->
          <select name="selectjue[]" class="selectjue js-example-basic-single" data-width="55px">
             <option>-</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
      </td>

      <td>
        <!-- __________________SELECTOR DE VIERNES ________________________-->
          <select name="selectvie[]" class="selectvie js-example-basic-single" data-width="55px">
             <option>-</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>

          </select>
      </td>

      <td>
        <!-- __________________SELECTOR DE SABADO ________________________-->
          <select name="selectsab[]" class="selectsab js-example-basic-single" data-width="55px">
             <option>-</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
      </td>

      <td>
        <!-- __________________SELECTOR DE DOMINGO ________________________-->
          <select name="selectdom[]" class="selectdom js-example-basic-single" data-width="55px">
             <option>-</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
      </td>

      <td>
          <button type="button" class="remove-item borrar btn btn-danger">
            <span class="glyphicon glyphicon-remove"></span>
          </button>
      </td>
      <td>
          <button type="button" class="btn btn-info">
            <span class="glyphicon glyphicon-ok"></span>
          </button>
      </td>
    </tr>
  </table>
 <a id="masfilas" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i></a>

</body>
</html>

Donde basicamente se elimino los atributos id de todos los select y los reemplace por el atributo name de forma de array para poder obtener todos los datos en tu controlador, ademas el la etiqueta tr tiene un css style="display:none" que hace que tu primera fila este oculta y ademas nos sirve como base para replicarla, le puse un id=mytable a la tabla, un botón al final que sirve para añadir mas filas y por ultimo añadí un class al botón borrar que es remove-item.

Ahora vamos a con el script

$(document).ready(function(){
    $("#masfilas").click(function(){
        var tableReg = document.getElementById("mytable");
        $("#mytable").append("<tr>"+tableReg.rows[0].innerHTML+"</tr>");//1
        $('.remove-item').off().click(function(e) {
            $(this).parent('td').parent('tr').remove();//2
        });
        addcambios();
    });
});
function addcambios(){
    //----------------------------select de TAREAS --------------------------
    $(".proyectoselect").change(function() {
        var $tareaselect=$(this).parents("tr").find("td")[1].children[0];//3
        $tareaselect.disabled=false;//4
        empty($tareaselect);//5
        var $subtareaselect=$(this).parents("tr").find("td")[2].children[0];//6
        $subtareaselect.disabled=true;//7
        empty($subtareaselect);//8

        id_selected = $(this).val();
        $.ajax({
            type: "GET",
            url: 'listartareas/'+id_selected, 
            dataType : 'text',
            success: function(data){
                var datados = JSON.parse(data);
                $.each(JSON.parse(datados), function(key, value) {
                    $tareaselect.append(new Option(value.nombretarea, value.id));//9
                });    
            },
            error: function(data) {
                alert('error');             }
        });
    });
    //---------------------------select de SUBTAREAS --------------------------
    $(".tareaselect").change(function() {
        var $subtareaselect=$(this).parents("tr").find("td")[2].children[0];//10
        $subtareaselect.disabled=false;//11
        empty($subtareaselect);//12
      id_selected = $(this).val();
      $.ajax({
          type: "GET",
          url: 'listartareas/'+id_selected, 
          dataType : 'text',
          success: function(data){
              var datados = JSON.parse(data);
              $.each(JSON.parse(datados), function(key, value) {
                   $subtareaselect.append(new Option(value.nombretarea, value.id)); //13
              });    
          },
          error: function(data) {
              alert('error');
          }
      });
    }); 
}
function empty(unselect){
    for (var i=1;i<unselect.children.length; i++)
    {
        unselect.children[i].remove();
    }
}

Para explicar el javascript puse unos numeritos en el codigo.

1= tableReg.rows[0]:selecciona la fila en la posicion 0 de nuestra tabla, para este caso justamente es la fila base. $("#mytable").append("<tr>"+tableReg.rows[0].innerHTML+"</tr>");: añade la nueva fila.

2=$(this).parent('td').parent('tr').remove(); elimina la fila seleccionada.

3=6=10= basicamente son el mismo codigo donde $(this).parents("tr") selecciona el tr actual, find("td")[1] seleciona el td en la posicion indicada.cabe aclarar que una tabla es como una matriz en cualquier otro lenguaje asi que las posiciones inician en 0, y children[0] selecciona la etiqueta en la posicion dada, en este caso 3 sera el select#tareaselect.

4=7=11= $tareaselect.disabled=false: cambia el valor de nuestro select de deshabilitado a habilitado o dependiendo lo que se necesita.

5=8=12=empty($tareaselect);: llamada a la funcion empty que elimina todos los datos del select, tiene la mista funcion que $('#subtareaselect').empty().

9=13=12=$tareaselect.append(new Option(value.nombretarea, value.id));: añade las nuevas option que son los datos del ajax que realizas

Espero te sirva.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *