1

Tengo el siguiente codigo que no me funciona. $(document).ready(funcPrincipal());

      function funcPrincipal()
      {
        $("#btnNuevoAlineamiento").on('click', funcNuevoAlineamiento());

      }


function funcNuevoAlineamiento()
              {
              $("#tablaAlineamientos")
              .append
              (
                $('<tr>')
                    .append
                    (
                      $('<td>')
                        .append
                        (
                          $('<input>').attr('type', 'text').addClass('form-control').attr('name', 'estrategias[]')
                        )
                    )
                    .append
                    (
                      $('<td>')
                        .append
                        (
                          $('<input>').attr('type', 'text').addClass('form-control').attr('name', 'alineamientos[]')
                        )
                    )
                    .append
                    (
                      $('<td>').addClass('text-center')
                        .append
                        (
                          $('<div>').addClass('btn btn-danger').text('Eliminar')
                        )
                    )
                );

              }

y la tabla es la siguiente:

 <label for="tablaAlineamientos">
              Agregar grupo familiar
              <div class='btn btn-success' id="btnNuevoAlineamiento">Nuevo</div>
            </label>
            <table class='table table-bordered table-hover' id="tablaAlineamientos">
                <tr>
                  <th>Estrategia</th>
                  <th>Alineamiento</th>
                  <th>Opciones</th>
                </tr>

                <tr>
                  <td><input type="text" class="form-control" name="estrategias[]" value=""></td>
                  <td><input type="text" class="form-control" name="alineamientos[]"  value=""></td>
                  <td class="text-center">
                    <div class='btn btn-danger'>Eliminar</div>
                  </td>
                </tr>

            </table>
6
  • No puedes añadir un append dentro de otro apppend Commented el 11 may. 2021 a las 17:27
  • ¿Esto qué tiene que ver con SQL?
    – jachguate
    Commented el 11 may. 2021 a las 17:33
  • @jachguate ahi lo cambie, disculpas.
    – gisela
    Commented el 11 may. 2021 a las 17:34
  • @WilsonFreddyAndiaAlborta Entonces como agregarias un input ???
    – gisela
    Commented el 11 may. 2021 a las 17:34
  • ¿Qué es lo que quieres lograr?
    – jachguate
    Commented el 11 may. 2021 a las 17:38

2 respuestas 2

1

Para agregar una nueva fila, agrega directamente el código HTML a la tabla, por ejemplo así:

function funcNuevoAlineamiento() {
  $("#tablaAlineamientos").append(`<tr>
    <td><input type="text" class="form-control" name="estrategias[]" value=""></td>
    <td><input type="text" class="form-control" name="alineamientos[]"  value=""></td>
    <td class="text-center"><div class="btn btn-danger">Eliminar</div></td>
  </tr>`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="tablaAlineamientos">Agregar grupo familiar
   <div class='btn btn-success' id="btnNuevoAlineamiento" onclick="funcNuevoAlineamiento()">Nuevo</div>
</label>
<table class='table table-bordered table-hover' id="tablaAlineamientos">
  <tr>
    <th>Estrategia</th>
    <th>Alineamiento</th>
    <th>Opciones</th>
  </tr>

  <tr>
    <td><input type="text" class="form-control" name="estrategias[]" value=""></td>
    <td><input type="text" class="form-control" name="alineamientos[]"  value=""></td>
    <td class="text-center"><div class='btn btn-danger'>Eliminar</div></td>
  </tr>
</table>

Haz clic en el botón "Ejecutar" para probar mi solución aquí mismo en el navegador.

2
  • Funciona 10 puntos. Si le agrego algun contador en la function funcNuevoAlineamiento() para asi puedo obtener los valores de los inputs?
    – gisela
    Commented el 11 may. 2021 a las 17:58
  • Si claro, puedes ir numerándolos.
    – jachguate
    Commented el 11 may. 2021 a las 19:54
0

Yo lo haria de esta manera:

  function funcPrincipal()
      {
        $("#btnNuevoAlineamiento").on('click', funcNuevoAlineamiento());

      }


function funcNuevoAlineamiento()
              {
              
              let contenido=`<tr>
                                <td>
                                    <input type='text' class='form-control' name='estrategias[]'>
                                </td>
                                <td>
                                    <input type='text' class='form-control' name='alineamientos[]'>
                                </td>
                                <td class='text-center'>
                                    <input type='button' class='btn btn-danger' value='eliminar'>
                                </td>`;
              $("#tablaAlineamientos")
              .append
              (contenido);

              }

Ahora tambien Puedes Trabajar Con CreateElement Que son crear etiquetas HtmL y agregarlas como hermanas...

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.