1

Estoy intentando agregar una fila a una tabla con datos provenientes de un modal que contiene un formulario, pero no se porque razon no se me agrega.

Agradeceria una solución, Muchas Gracias

$(document).ready(function() {
  $('#btnEnviar').click(function() {
    const unidad = $('#unidad').val();
    const introduccion = $('#introduccion').val();
    const repaso = $('#repaso').val();

    var fila = '<tr><th scope="row">1</th><td>' + unidad + '</td><td>' + introduccion + '</td><td>' + repaso + '</td><td><input type="checkbox"></td><td class="botonesCursos"><div class="containter row"><button type="button" class="btn btn-warning mr-1 btn-sm">Editar</button><button type="button" class="btn btn-primary mr-1 btn-sm">Previsualizar</button><a href="admRecursos.html"><button type="button" class="btn btn-success mr-1 btn-sm">Adm Recursos</button></a></div></td></tr>'

    $('#tablaUnidades').append(fila);
  });
});
<div id="misUnidades" class="container col-md-11 mt-4">
  <table class="table" id="tablaUnidades">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Mis Unidades</th>
        <th colspan="5" style="text-align: right"> Curso: Introducción a la programación</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="4">Estas son las unidades de los cursos - Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus dicta eligendi nulla vero eveniet nisi ipsam impedit alias qui nihil.</td>
      </tr>
    </tbody>

    <thead class="thead-dark">
      <tr>
        <th scope="col" class="colWidth">#</th>
        <th scope="col">Unidad</th>
        <th scope="col">Introducción</th>
        <th scope="col">Repaso</th>
        <th scope="col" class="colWidth">Activo</th>
        <th scope="col">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search..." aria-label="Recipient's username" aria-describedby="button-addon2">
            <div class="input-group-append">
              <button class="btn btn-outline-light" type="button" id="button-addon2">Buscar</button>
            </div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody id="filas">
      <tr>
        <th scope="row">1</th>
        <td>Variables</td>
        <td>En esta unidad...</td>
        <td>Hemos visto en...</td>
        <td><input type="checkbox"></td>
        <td class="botonesCursos">
          <div class="containter row">
            <button type="button" class="btn btn-warning mr-1 btn-sm">Editar</button>
            <button type="button" class="btn btn-primary mr-1 btn-sm">Previsualizar</button>
            <a href="admRecursos.html">
              <button type="button" class="btn btn-success mr-1 btn-sm">Adm Recursos</button>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Flujo de control</td>
        <td>En esta unidad...</td>
        <td>Hemos visto en...</td>
        <td><input type="checkbox"></td>
        <td class="botonesCursos">
          <div class="containter row">
            <button type="button" class="btn btn-warning mr-1 btn-sm">Editar</button>
            <button type="button" class="btn btn-primary mr-1 btn-sm">Previsualizar</button>
            <a href="admRecursos.html">
              <button type="button" class="btn btn-success mr-1 btn-sm">Adm Recursos</button>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Recursividad</td>
        <td>En esta unidad...</td>
        <td>Hemos visto en...</td>
        <td><input type="checkbox"></td>
        <td class="botonesCursos">
          <div class="containter row">
            <button type="button" class="btn btn-warning mr-1 btn-sm">Editar</button>
            <button type="button" class="btn btn-primary mr-1 btn-sm">Previsualizar</button>
            <a href="admRecursos.html">
              <button type="button" class="btn btn-success btn-sm">Adm Recursos</button>
            </a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<!--Fin tabla de unidades-->

<div id="botones" class="container d-flex justify-content-center">
  <button type="button" class="btn btn-outline-primary btn-lg">Volver</button>
  <button type="button" class="btn btn-outline-success btn-lg" data-toggle="modal" data-target="#modelId">Nueva Unidad</button>
  <button type="button" class="btn btn-outline-secondary btn-lg">Imprimir</button>
</div>
</main>

<!--MODAL-->
<div class="modal fade md-6 border rounded" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container">
          <form action="" id="formularioNuevaUnidad">
            <div class="input-group">
              <input type="text" class="form-control" id="unidad" placeholder="Unidad">
            </div>
            <div class="input-group mt-4">
              <input type="text" class="form-control" id="introduccion" placeholder="Introduccion">
            </div>
            <div class="input-group mt-4">
              <input type="text" class="form-control" id="repaso" placeholder="Repaso">
            </div>
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-success" id="btnEnviar">Agregar</button>
        </form>
      </div>
    </div>
  </div>
</div>

2 respuestas 2

0

Básicamente, lo que estás intentando hacer es agregar una fila al final de una tabla HTML con un método que agrega código justo antes del cierre de un elemento. Hay que tener cuidado con eso, sino la fila se podría agregar en algo como:

<table...>
    <thead>...</thead>
    <tbody>
        <tr>
            ...
        </tr>
    </tbody>
    <tr>... fila nueva ...</tr>
</table>

La solución para eso es agregar la fila al final del tbody, que es donde esperas que aparezca. Para eso tienes dos opciones: o le das un ID al tbody (que no estoy seguro que sea buena práctica, según los estándares de la W3C), o usas el selector para indicar que hay que usar un append al último hijo del tbody:

$('#tablaUnidades > tbody:last-child').append(fila);

De este modo, el append dejará la fila siempre al final del cuerpo de la tabla.

Hay un caso similar con más análisis en la versión en inglés:

https://stackoverflow.com/questions/171027/add-table-row-in-jquery

Espero que te ayude.

2
  • No me ha funcionado ese metodo, sigue sin agregar la fila despues de las otras, no podria ser que tengo algun error en algun div o que este mal realizada la tabla? Commented el 18 feb. 2019 a las 12:51
  • Revistaste la consola para ver si te tira algún mensaje de error? Commented el 19 feb. 2019 a las 15:52
0

podrías intentar esto?

$(tabla).find('tbody').append([
        '<tr>',
          '<td>'+tusVariables+'</td>',
          '<td>'+tusVariables+'</td>',
          '<td>'+tusVariables+'</td>',
        '</tr>'
        ].join(''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Saludos.

1
  • Con este metodo tampoco me a funcionado, no podra ser que este mal realizada la tabla? Commented el 18 feb. 2019 a las 12:52

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.