1

¿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.

//----------------------------select de TAREAS --------------------------
        
        $(".proyectoselect").change(function() {
          $(".tareaselect").prop("disabled", false);
          $('#tareaselect').empty();
          $('#subtareaselect').empty(); 
          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($("<option></option>")
                           .attr("value",value.id)
                           .text(value.nombretarea)); 
                  });    
              },
              error: function(data) {
                  alert('error');
              }
          });
        }); 

//---------------------------select de SUBTAREAS --------------------------

        $(".tareaselect").change(function() {
          $(".subtareaselect").prop("disabled", false);
          $('#subtareaselect').empty();
          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($("<option></option>")
                           .attr("value",value.id)
                           .text(value.nombretarea)); 
                  });    
              },
              error: function(data) {
                  alert('error');
              }
          });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
          <td>
            <!-- __________________SELECTOR DE PROYECTOS________________________ -->
            <select  id="proyectoselect" class="proyectoselect js-example-basic-single-hide-search" 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 id="tareaselect" class="tareaselect js-example-basic-single-hide-search" data-width="160px">
            </select>
          </td>

          <td>
          <!-- __________________SELECTOR DE SUBTARRAS ________________________-->
            <select id="subtareaselect" class="subtareaselect js-example-basic-single-hide-search " data-width="160px">
            </select>
          </td>
          <td>
            <!-- __________________SELECTOR DE LUNES ________________________-->
              <select id="selectlun" class="selectlun js-example-basic-single" data-width="55px">
                <option>-</option>
                <option>1</option>
            		.
            		.
            		.
            		.

                <option>5</option>
               
              </select>
          </td>

          <td>
            <!-- __________________SELECTOR DE MARTES ________________________-->
              <select id="selectmar" class="selectmar js-example-basic-single" data-width="55px">

              </select>
          </td>

          <td>
            <!-- __________________SELECTOR DE MIERCOLES ________________________-->
              <select id="selectmie" class="selectmie js-example-basic-single" data-width="55px">
                 <option>-</option>

              </select>
          </td>

          <td>
            <!-- __________________SELECTOR DE JUEVES ________________________-->
              <select id="selectjue" class="selectjue js-example-basic-single" data-width="55px">
                 <option>-</option>

              </select>
          </td>

          <td>
            <!-- __________________SELECTOR DE VIERNES ________________________-->
              <select id="selectvie" class="selectvie js-example-basic-single" data-width="55px">
                 <option>-</option>

              </select>
          </td>

          <td>
            <!-- __________________SELECTOR DE SABADO ________________________-->
              <select id="selectsab" class="selectsab js-example-basic-single" data-width="55px">
                 <option>-</option>
              </select>
          </td>
          
          <td>
            <!-- __________________SELECTOR DE DOMINGO ________________________-->
              <select id="selectdom" class="selectdom js-example-basic-single" data-width="55px">
                 <option>-</option>
              </select>
          </td>

          <td>
              <button type="button" class="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>

1 respuesta 1

2

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.

4
  • La fila como tal, la pinta, la agrega a la tabla. Pero la logica de las selects, no funciona y no entiendo por qué. La primera select (proyectoselect) carga la info de la BBDD cuando se crea la fila, con un foreach. No sé si por el hecho de estar oculta la fila, cuando la agregas en #masfilas con append, esta select (proyectoselect), no trae la información y esta desactivada. Y ya pierde la logica porque no se activan las demás (tareaselec y luego subtareaselect). Si modifico el estilo para que la primera vez sí aparezca la fila, así sí funciona la select proyectoslect, pero no las demas.
    – morrison
    el 6 ago. 2017 a las 10:24
  • No entiendo que quieres decir en tu explicación de los puntos 3=6=10, con "....y children[0] selecciona la etiqueta en la posicion dada, en este caso 3 sera el select#tareaselect." ¿?. Cuando en cada select has puesto el atributo name y comentas y los reemplace por el atributo name de forma de array para poder obtener todos los datos en tu controlador: Cómo debería hacer referencia a la información de cada celda de la tabla en el momento de coger los datos para grabarlos en la BBDD?. No entiendo como se modifican los indices de los arrays en por ejemplo name="proyectoselect[]
    – morrison
    el 6 ago. 2017 a las 10:28
  • Sigo trabajando en tu código y haciendo pruebas. Me ha servido muchísimo. Excelente respuesta. Gracias infinitas @Shassain
    – morrison
    el 6 ago. 2017 a las 10:31
  • Ah, y lo último era que al clonar la fila, lo hacía con los datos que tuviera esa primera fila o fila base en ese momento, cosa que no debería ser, debería agregar una fila vacía y obviamente con la info de la primera select cargada.
    – morrison
    el 6 ago. 2017 a las 10:40

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.