Agregar datos a una tabla desde una fuente externa con JQUERY

Documento sin título

Agregar datos a una tabla desde una fuente externa con JQUERY

Ahora mostrare una forma de ingresar datos a una tabla desde una fuente externa (en este caso una lista estática) utilizando jquery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
   $("#btnInsertar").click(addUsuario);
   $("#btnInsertarExt").click(getDatos);
});

function addUsuario(){
   var Nombres=$("#txtNombres").val();
   var apellidos=$("#txtApellidos").val();
   var telefono=$("#txtTelefono").val();
   var tablaDatos= $("#tblDatos");

   if(Nombres!="" || apellidos!="" || telefono!="" ){
      tablaDatos.append("<tr><td>"+Nombres+"</td><td>"+apellidos+"</td><td>"+telefono+"</td></tr>");
      reset_campos();
   }
}

function reset_campos(){
   $("#txtNombres").val("");
   $("#txtApellidos").val("");
   $("#txtTelefono").val("")
}

function getDatos(){
   var resp=true;
   var datos='';
   $.ajaxSetup({async: false});
   $.post('datos.jsp', function(data) {datos=data;});
   var tablaDatos= $("#tblDatos");

   var Nombres="";
   var apellidos="";
   var telefono="";

   var filasStr = datos.split("|||");

   for(i=0;i<filasStr.length;i++){
      var fila= filasStr[i];
      var datosFila=fila.split("&&&");

      Nombres=datosFila[0];
      apellidos=datosFila[1];
      telefono=datosFila[2];

      tablaDatos.append("<tr><td>"+Nombres+"</td><td>"+apellidos+"</td><td>"+telefono+"</td></tr>");
   }
}
</script>
<style type="text/css">
   .tablaDatos {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      font-style: normal;
      background-color: #FFC;
   }
   .tablaDatosTitulo {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      font-style: italic;
      background-color: #F90;
   }
</style>
</head>
<body>
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0" class="tablaDatos">
      <tr>
         <td width="33%" class="tablaDatosTitulo">Nombres</td>
         <td width="67%"><input name="txtNombres" type="text" id="txtNombres" size="50" /></td>
      </tr>
      <tr>
         <td class="tablaDatosTitulo">Apellidos</td>
         <td><input name="txtApellidos" type="text" id="txtApellidos" size="50" /></td>
      </tr>
      <tr>
         <td class="tablaDatosTitulo">Teléfono</td>
         <td><input name="txtTelefono" id="txtTelefono" type="text" /></td>
      </tr>
      <tr align="center">
         <td colspan="2"><input name="btnInsertar" id="btnInsertar" type="button" value="Insertar" /><input name="btnInsertarExt" id="btnInsertarExt" type="button" value="Insertar desde fuente externa" /></td>
      </tr>
</table>
<br />
<table width="70%" border="0" align="center" cellpadding="0" cellspacing="0" class="tablaDatos" id="tblDatos">
      <tr class="tablaDatosTitulo">
         <td><strong>Nombres</strong></td>
         <td><strong>Apellidos</strong></td>
         <td><strong>Teléfono</strong></td>
      </tr>
</table>
</body>
</html>

Explicación

En este ejemplo tenemos dos formas de agregar los datos a la tabla:
  • Desde campos de un formulario: En la función function addUsuario() simplemente hacemos referencia a los campos del formulario.
  var Nombres=$("#txtNombres").val();
  var apellidos=$("#txtApellidos").val();
  var telefono=$("#txtTelefono").val();
  var tablaDatos= $("#tblDatos");
Luego debemos hacer una referencia la tabla que vamos a agregar los datos:
var tablaDatos= $("#tblDatos");
Y por ultimo se hacen las validaciones de los campos y se agregan los datos con el método append de Jquery.
 if(Nombres!="" || apellidos!="" || telefono!="" ){
      tablaDatos.append("<tr><td>"+Nombres+"</td><td>"+apellidos+"</td><td>"+telefono+"</td></tr>");
      reset_campos();
   }
El método append nos permite agregar un nuevo contenido al final de un elemento sin modificar la información de este.
  • Desde una fuente externa: En la función function getDatos() usamos la función  $.post para traer la información de una URL. Estos datos están establecidos de forma estática aunque también puede ser tomada de un archivo plano o una base de datos si se usa paginas dinámicas como JSP o PHP.
Primero tomamos la información de la URL:
var datos='';
$.ajaxSetup({async: false});
$.post('datos.jsp', function(data) {datos=data;});
La línea $.ajaxSetup({async: false}); especifica que la transmisión de los datos debe hacerse de forma sincrónica, ósea que el programa debe esperar a la respuesta de la URL para continuar su ejecución.
En $.post('datos.jsp', function(data) {datos=data;}); especificamos la URL y asignamos la variable que retornara los datos en var datos='';
Como se vio en el método function addUsuario() hay que hacer referencia a la tabla que tendrá los datos. var tablaDatos= $("#tblDatos");
Bueno ahora lo que sigue es el procesamiento de la información. En este ejemplo he utilizado la secuencia de caracteres &&& para separar los datos de las columnas y la secuencia ||| para separar las filas de la tabla. Aunque hay varios métodos para hacer esto me pareció el mas sencillo.
Para separar los datos y agregarlos a la tabla vamos a utilizar el método split() y append():
var filasStr = datos.split("|||");
for(i=0;i<filasStr.length;i++){
      var fila= filasStr[i];
      var datosFila=fila.split("&&&");

      Nombres=datosFila[0];
      apellidos=datosFila[1];
      telefono=datosFila[2];

      tablaDatos.append("<tr><td>"+Nombres+"</td><td>"+apellidos+"</td><td>"+telefono+"</td></tr>");
   }
Bueno espero que les haya servido este pequeño ejemplo. Les agradezco cualquier tipo de comentario y sugerencia de tutoriales.
Aqui les dejo los fuentes del ejemplo.
Descargar Fuentes del Ejemplo
:)

Comentarios

  1. Unknown15 de noviembre de 2013, 6:16 a.m.

    tienes una con eliminar?

    ResponderBorrar
    Respuestas
    1. Aleduc15 de noviembre de 2013, 7:58 a.m.

      Hola. Seria con la función .remove de jquery. Para mas info http://api.jquery.com/remove/

      Borrar
    2. Unknown18 de noviembre de 2013, 8:36 a.m.

      no me funciona con remove. me elimina solo el boton que es para eliminar.

      Borrar
  2. Unknown8 de junio de 2015, 2:46 p.m.

    una consulta y como hago para extraer datos de u jsp externo

    ResponderBorrar
  3. Unknown18 de febrero de 2016, 6:18 p.m.

    Excelente aporte gracias....una pregunta.... como seria coger los valores de la tabla y amacenarlos en una base de datos

    ResponderBorrar
  4. Unknown20 de julio de 2016, 8:56 a.m.

    me ayudo bastante, muchas gracias

    ResponderBorrar
  5. Unknown11 de agosto de 2016, 12:05 p.m.

    para sumar una columna como seria??

    ResponderBorrar
  6. Anónimo28 de junio de 2017, 3:50 p.m.

    ME AYUDO BASTANTE GRACIAS :)=

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Encriptar y desencriptar archivos con NodeJs y crypto-js

Requisitos Primero debes iniciar el proyecto de npm con npm init -y y luego deberás instalar la dependencia de crypto-js con npm i --save crypto-js Ahora crea un archivo llamado cfrf.js y pega el siguiente código en el archivo.  const   CryptoJS  =  require ( 'crypto-js' ); function   encryp ( data ,  key ){      return   CryptoJS . AES . encrypt ( data ,  key ). toString (); } function   decryp ( data ,  key ){      var   wA =  CryptoJS . AES . decrypt ( data ,  key );      return   wA . toString ( CryptoJS . enc . Utf8 ); } const   args =  process . argv ; if ( args . length < 7 ){      console . log ( `Uso: node cfrf.js <file-input> <op ['enc' || 'des']> <pass> <deep> <file-out> \n\n                    Ejem: node cfrf.js texto.txt enc clave_secreta 3 texto.txt.cfr` );      return ; } var   file_inp =  args [ 2 ]; var   op =  args [ 3 ]; var   pass =  args [ 4 ]; var   deep =  args [ 5 ]; var   file_out =  args [ 6 ]; var  
Leer más

Recorrer campos de un formulario con JQuery

Documento sin título Recorrer campos de un formulario con JQuery Este pequeño ejemplo ilustra la manera de recorrer los campos de un formulario con JQuery. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Ejemplo </title> <script language= "JavaScript" type= "text/javascript" src= "jquery.js" charset= "utf-8" ></script> <script> $( document ).ready(function(){ $( "#frmDatos" ). find ( ':input' ).each(function() { var elemento= this; alert ( "elemento.id=" + elemento.id + ", elemento.value=" + elemento.value); }); }); </sc
Leer más