0

Ese es el código que tengo hecho, solo que no tengo la idea como mostrar en la tabla de bootstrap lo que guardo en los arreglos

<!DOCTYPE html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script  >

  var nombre=[];
  var apellido=[];
  var telefono=[];
  var email=[];
  var i=0;

  function insertarDatos(){
    nombre[i]=document.getElementById("nombre").value;
     apellido[i]=document.getElementById("nombre").value;
     telefono[i]=document.getElementById("nombre").value;
     email[i]=document.getElementById("nombre").value;
     i++
     alert("Ha insertado Los datos correctamente");  
  } 

   function insertarDatos(){

    }
   </script>

  </head>
  <body>

   <div class="container text-center bg-inverse text-white ">

    <h1 class="font-weight-normal">Bienvenido a Bootstrap 4</h1>

   </div>

   <div   class="container text-left pt-5">
          <h2>Registro de datos</h2>
       <form>
           <div class="form-group row col-12 ">
          <label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Nombre</label>
         <div class="col-sm-10">
          <input type="text" class="form-control form-control-sm" id="nombre" placeholder="Ingresa Tu Nombre">
       </div>
</div>
    <div class="form-group row col-12 ">
          <label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Apellido</label>
         <div class="col-sm-10">
          <input type="text" class="form-control form-control-sm" id="apellido" placeholder="Ingresa Tu Apellido">
       </div>
</div>

    <div class="form-group row col-12 ">
          <label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Telefono</label>
         <div class="col-sm-10">
          <input type="text" class="form-control form-control-sm" id="telefono" placeholder="Ingresa Tu Telefono">
       </div>
</div>

    <div class="form-group row col-12 ">
          <label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Correo</label>
         <div class="col-sm-10">
          <input type="email" class="form-control form-control-sm" id="correo" placeholder="Ingresa Tu correo">
       </div>
</div>
          <div class="d-flex justify-content-sm-center">
             <button type="button" class="btn btn-outline-success " onClick="insertarDatos();">Insertar</button> 
          </div>

       </form>
   </div>

<div class="container">
   <div class="container text-center bg-inverse text-white col-12 pt-5 my-3">

   </div>
    <div class="mt-5">
      <h2>Tabla de datos Registrado </h2>

       <table class="table mt-3">
  <thead class="thead-inverse">
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
      <th>Telefono</th>
      <th>Correo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </div>
</div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>
1
  • Ese es el codigo que tengo hecho solo que no tengo la idea de como mostrar en la tabla de bootstrap lo que guardo en los arreglos
    – Jctd
    el 26 jun. 2017 a las 23:10

1 respuesta 1

1

Bueno, primero que todo debo expresar que modifique un poco tu idea original no por creer que este mal usar javascript vanilla sino por aquello de que estas incluyendo JQuery como librería y si ya tienes la herramienta cargada, no veo el porque no usarla.

//Exactamente tu función con una linea extra y expresada como JQuery
  function insertarDatos(){        
    nombre[i]=$("#nombre").val();
    apellido[i]=$("#apellido").val();
    telefono[i]=$("#telefono").val();
    email[i]=$("#correo").val();
    i++;
    insertarNuevaFila();
    alert("Ha insertado Los datos correctamente");  
  }
//Función extra encargada de hacer la inserción en el DOM 
  function insertarNuevaFila() {
    $("tbody").append(`<tr>
      <th scope="row">${nombre[i-1]}</th>
      <td>${apellido[i-1]}</td>
      <td>${telefono[i-1]}</td>
      <td>${email[i-1]}</td>
    </tr>`);
  }

//Asignación de evento para tu formulario
  $("form").submit(function(evento) {
    evento.preventDefault();    
    insertarDatos();
  });

Supongo que si no usas JQuery es porque no tienes mucho conocimiento de el, mas allá de que es necesario para poder usar Bootstrap, por tanto te dejare una pequeña guiá:

Sintaxis básica:

$(selector).funcion(parametros);

Donde

selector: es un criterio de búsqueda de uno o muchos elemento en el DOM, valiéndose de la forma de seleccionar objetos de CSS, de esta forma:

  • $("#cualquier-cosa"): busca un elemento "único" cuyo texto en id es igual a cualquier-cosa
  • $(".cualquier-cosa"): busca uno o varios elementos cuya clase contenga el texto cualquier-cosa
  • $("cualquier-cosa"): busca todas las etiquetas cualquier-cosa
  • $("[cualquier-cosa]"): busca los elemento que tenga un atributo cualquier-cosa

funcion: es el método que quieres ejecutar de JQuery «consultar en lista de documentación»

parametros: (opcional) son las variables que le pasa al método de JQuery que estas ejecutando.

Entonces usando la respuesta como ejemplo $("form").sumbit(funcion):

  • form: es un elemento dentro de tu estructura HTML «Asumiendo que es solo uno, una mala practica entre otras cosas por lo que seria mucho mejor asignarle un id».
  • submit: es un método de JQuery que permite asignar un evento de envió al formulario.
  • funcion: es la función que se va ejecutar cada vez que se active el evento de envió del formulario.

Lo anterior como para resumir, pues existen variaciones y combinaciones para consultas mas especificas, te dejo este enlace con documentación oficial http://api.jquery.com/all-selector/ para que adentres mucho mas en el tema, en caso de que no lidies muy bien con el ingles aquí hay una guiá no oficial en español https://librosweb.es/libro/fundamentos_jquery/capitulo_3/seleccion_de_elementos.html.

Espero que sea de provecho.

1
  • Muchas gracias ,La verdad si soy algo nuevo en este tema igual es bueno saber como podia hacerlo de mejor forma y gracias por las guias
    – Jctd
    el 27 jun. 2017 a las 1:22

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.