Deshabilitar las teclas Delete y Suprimir en un campo de entrada de texto HTML.

El siguiente código limita que las teclas Delete y Suprimir funcionen en un campo de entrada de texto HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">	
	<title>Block Deletion</title>		
</head>
<body>
	<input type='text' id='txtTest' name='txtTest' class='BlockDeletion' value='Bórrame'/>
	<script src="../js/jquery-2.2.1.js"></script>
	
	<script>
		$(document).ready(function()
		{	
			$('.BlockDeletion').on('keydown', function (e)
			{
				try {                
					if ((e.keyCode == 8 || e.keyCode == 46))
						return false;
					else
						return true;               
				}
				catch (Exception)
				{
					return false;
				}
			});        
		});
	</script>
</body>
</html>

 

Obtener valor del Web.config con Javascript.

El siguiente fragmento de código encapsula en una variable JavaScript el valor de una AppSetting de un Web.config, permitiendo así que dicha variable pueda ser utilizada por cualquier componente o función (JavaScript o JQuery) de la página web.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">		
	<script>
		var _valor = '@System.Configuration.ConfigurationManager.AppSettings["appSettingKey"]';
	</script>	
</head>
<body>	
</body>
</html>

Limpiar filtros de tabla de JQuery.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>JQuery Data Table</title>	
	<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="../css/foundation.min.css" rel="stylesheet" type="text/css">		
	<link href="../css/dataTables.foundation.min.css" rel="stylesheet" type="text/css">		
</head>
<body>
<div class="row">
	<div class="col-md-12">
	<br>
	<table id="tblEjemplo" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>        
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
            </tr>
            <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>
                <td>$850,000</td>
            </tr>
            <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011/08/14</td>
                <td>$163,000</td>
            </tr>
            <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sidney</td>
                <td>37</td>
                <td>2011/06/02</td>
                <td>$95,400</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009/10/22</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011/05/07</td>
                <td>$145,000</td>
            </tr>
            <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008/10/26</td>
                <td>$235,500</td>
            </tr>
            <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011/03/09</td>
                <td>$324,050</td>
            </tr>
            <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/12/09</td>
                <td>$85,675</td>
            </tr>
            <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2008/12/16</td>
                <td>$164,500</td>
            </tr>
            <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2010/02/12</td>
                <td>$109,850</td>
            </tr>
            <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
                <td>$452,500</td>
            </tr>
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008/09/26</td>
                <td>$645,750</td>
            </tr>
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
                <td>$234,500</td>
            </tr>
            <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011/05/03</td>
                <td>$163,500</td>
            </tr>
            <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009/08/19</td>
                <td>$139,575</td>
            </tr>
            <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013/08/11</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/07/07</td>
                <td>$87,500</td>
            </tr>
            <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012/04/09</td>
                <td>$138,575</td>
            </tr>
            <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
                <td>$125,250</td>
            </tr>
            <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>
                <td>$115,000</td>
            </tr>
            <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
                <td>$75,650</td>
            </tr>
            <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011/12/06</td>
                <td>$145,600</td>
            </tr>
            <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011/03/21</td>
                <td>$356,250</td>
            </tr>
            <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009/02/27</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010/07/14</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
    </table>
	</div>
</div>	
<div class="row">
		<div class="col-md-12">
			<div style="text-align:right;">
				<button type="button" id="btnLimpiar" name="btnLimpiar" class="btn btn-danger">
					Limpiar filtros
				</button> 				
			</div>
			<br>
		</div>
</div>

	<script src="../js/jquery-2.2.1.js"></script>
	<script src="../js/jquery.dataTables.min.js"></script>
	<script src="../js/dataTables.foundation.min.js"></script>	
	<script>	
		$(document).ready(function() {	
					
			var _configuration = 
			{				
				"dom" : '<"top"lf<"toolbar">><"bottom"rtip>',
				"stateSave" : false,
				"language": 
				{
					"lengthMenu": " | _MENU_ Registros por página.",
					"zeroRecords": "No se encontraron resultados.",					
					"info": "Mostrando de _START_ a _END_ de un total de _TOTAL_ registros.",
					"infoEmpty": "No existen registros.",										
					"search": "Buscar:",
					"infoFiltered":"",
					"paginate": 
					{
						"first":      "Primero",
						"last":       "Último",
						"next":       "Siguiente",
						"previous":   "Anterior"
					}
				},	
				"lengthMenu" : [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
				"pageLength" : 10
			};			
			
			$('#tblEjemplo').DataTable(_configuration);		
						
			$('div.dataTables_filter input').attr('placeholder', 'Escribe aquí...');			
			
			$('#tblEjemplo_length').addClass('pull-right');
			$('#tblEjemplo_filter').addClass('pull-right');			
			$('#tblEjemplo_paginate').addClass('pull-right');			
			
			$('#btnLimpiar').on('click', function()
			{				
				$('#tblEjemplo_filter').find('input[type=search]').val('');
				$("#tblEjemplo").DataTable().search('').draw();
			});	
		});		
	</script>	
</body>
</html>

 

Contar vocales con JQuery.

En el presente post te presento la forma de contar las vocales de un párrafo utilizando JQuery.

ConteoVocales.html

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'/>
	<title>Conteo de vocales</title>
</head>
<body>
	<label for='instrucciones'>Ingresa un párrafo:</label>
	</p>
	<textarea id='txtEntrada' rows='5' cols='50' style='resize:none;'></textarea>
	</p>
	<button type="button" id="btnContarVocales" name="btnContarVocales">
		Contar vocales
	</button>  
	<script src="../scripts/jquery-3.1.1.min.js"></script>
	<script type='text/javascript'>   
        $(document).ready(function()
        {         
            //Se asocia el evento click al Button [btnContarVocales].
            $('#btnContarVocales').on('click', function()
            {   
				/*
				Se obtiene el texto ingresado, se le quitan los espacios en blanco,
				se convierte a minusculas y se encapsula en la variable '_parrafo'.				
				*/
				var _parrafo= ($('#txtEntrada').val()).replace(/ /gi, '').toLowerCase();
            
				/*
				Se crea el arreglo '_vocales' con los caracteres que vamos a contabilizar.
				*/
                var _vocales = [ 'a', 'e', 'i', 'o', 'u'];
				
				/*
				Se crean e inicializan variables para encapsular el conteo de cada una 
				de las vocales.
				*/
				var _contadorA= 0;
				var _contadorE= 0;
				var _contadorI= 0;
				var _contadorO= 0;
				var _contadorU= 0;				

				/*
				Se recorre el texto encapsulado en la variable '_parrafo' y de acuerdo al
				caracter recorrido se va aumentando el contador relacionado con cada una 
				de las vocales segun corresponda.
				*/
				for(var i=0; i < _parrafo.length; i++)
				{
					switch(_parrafo[i])
					{
						case 'a':
						{
							_contadorA++;
							break;							
						}
						case 'e':
						{
							_contadorE++;
							break;							
						}
						case 'i':
						{
							_contadorI++;
							break;							
						}
						case 'o':
						{
							_contadorO++;
							break;							
						}
						case 'u':
						{
							_contadorU++;
							break;							
						}						
					}					
				}
				
				/*
				Se encapsula en la variable '_resultado' un mensaje con las vocales 
				y sus respectivos contadores.
				*/
				var _resultado= 'El resultado del conteo es el siguiente:\n\n' + '[a]: ' +  _contadorA + '\n[e]: ' + _contadorE + '\n[i]: ' + _contadorI + '\n[o]: ' + _contadorO + '\n[u]: ' + _contadorU;
				
				/*
				Se despliega en pantalla el resultado encapsulado en la variable '_resultado'
				*/
				alert(_resultado);
            });     
        });
    </script>
</body>
</html>

En el siguiente enlace podrás descargar el código fuente completo:

ConteoVocales.rar (29,97 kb)

Crear Tabla con JQuery.

En el presente post te presento la forma de crear una tabla responsiva utilizando Bootstrap y JQuery.

Helper.js

//Función para generar y retornar un conjunto de datos de prueba.
function ObtenDatos()
{
	var _personas= 
	[
		{
			personaId: 1,
			nombre: 'Adrian',
			apellidoPaterno: 'Gonzalez',
			apellidoMaterno: 'Fernandez',
			fechaNacimiento: '1990-10-12',
			genero: 'M'			
		},
		{
			personaId: 2,
			nombre: 'Maria',
			apellidoPaterno: 'Sanchez',
			apellidoMaterno: 'Torres',
			fechaNacimiento: '1960-02-04',
			genero: 'F'
		},
		{
			personaId: 3,
			nombre: 'Luis Fernando',
			apellidoPaterno: 'Morales',
			apellidoMaterno: 'Salgado',
			fechaNacimiento: '1988-09-20',
			genero: 'M'			
		},
		{
			personaId: 4,
			nombre: 'Victor',
			apellidoPaterno: 'Ferrer',
			apellidoMaterno: 'Lopez',
			fechaNacimiento: '1970-05-21',
			genero: 'M'
		},
		{
			personaId: 5,
			nombre: 'Amanda',
			apellidoPaterno: 'Sandria',
			apellidoMaterno: 'Martinez',
			fechaNacimiento: '1991-09-15',
			genero: 'F'
		},
		{
			personaId: 6,
			nombre: 'Rodrigo',
			apellidoPaterno: 'Montes',
			apellidoMaterno: 'Hernandez',
			fechaNacimiento: '1985-07-27',
			genero: 'M'
		},
		{
			personaId: 7,
			nombre: 'Emilio',
			apellidoPaterno: 'Duran',
			apellidoMaterno: 'Ruiz',
			fechaNacimiento: '2000-01-06',
			genero: 'M'
		},
		{
			personaId: 8,
			nombre: 'Santiago',
			apellidoPaterno: 'Montiel',
			apellidoMaterno: 'Garcia',
			fechaNacimiento: '1970-06-20',
			genero: 'M'
		},                  
		{
			personaId: 9,
			nombre: 'Monica',
			apellidoPaterno: 'Ortigoza',
			apellidoMaterno: 'Posadas',
			fechaNacimiento: '1975-11-04',
			genero: 'F'
		},
		{
			personaId: 10,
			nombre: 'Ricardo',
			apellidoPaterno: 'Parra',
			apellidoMaterno: 'Zuñiga',
			fechaNacimiento: '1997-08-16',
			genero: 'M'
		}		
	]

	return _personas;
}

//Función para crear la tabla.
function MuestraPersonas(tabla, datos)
{
	//Se limpiar el contenido de la tabla, excepto los titulos de las columnas.
	$('#' + tabla).find('tr:not(:first)').remove();		

	//Se valida si el origen de datos no contiene información.
	if(datos==null || datos.length==0)
	{		
		//Se crea una nueva fila.
		var _filaVacia = $((document).createElement('tr'));
        _filaVacia.css('text-align', 'center');

		//Se anexa la fila a la tabla.
        $('#' + tabla).append(_filaVacia);
		
		//Se crea una columna y se le asigna un tamaño de 4 columnas.
        var _columnaVacia = $((document).createElement('td'));            
        _columnaVacia.attr('colspan', 4);

		//Se crea un nodo de texto para definir un mensaje que se mostrará cuando no haya elementos.
        var _contenidoVacio = $((document).createTextNode('No se encontraron resultados :('));
		
		//Se anexa el nodo de texto a la columna.
        _columnaVacia.append(_contenidoVacio);
            
		//Se anexa la columna a la fila.
        _filaVacia.append(_columnaVacia);
		
		//Se finaliza la función.
		return;
	}
	
	//Se recorre cada uno de los elementos del origen de datos.
	$.each(datos, function (key, item)
	{
		//Se crea una nueva fila y se le asigna un identificador.
		var _fila= $((document).createElement('tr'));
		_fila.attr('id', 'fila'+item.personaId);

		//Se anexa la fila a la tabla.
		$('#' + tabla).append(_fila)
		
		//Identificador de la persona.

		//Se crea una nueva columna para encapsular los identificadores de las personas.		
		var _columnaPersonaId= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el identificador de la persona.
		var _personaId= $((document).createTextNode(item.personaId));
		
		//Se anexa a la columna [_columnaPersonaId] el nodo de texto.
		_columnaPersonaId.append(_personaId);
		
		//Se anexa la columna [_columnaPersonaId] a la fila.
		$('#fila' + item.personaId).append(_columnaPersonaId);
		
		//Nombre completo.
		
		//Se crea una nueva columna para encapsular el nombre completo de las personas.		
		var _columnaNombre= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el nombre completo de la persona.
		var _nombre= $((document).createTextNode(item.nombre + ' ' + item.apellidoPaterno + ' ' + item.apellidoMaterno));
		
		//Se anexa a la columna [_columnaNombre] el nodo de texto.
		_columnaNombre.append(_nombre);
		
		//Se anexa la columna [_columnaNombre] a la fila.
		$('#fila' + item.personaId).append(_columnaNombre);

		//Fecha de Nacimiento.
		
		//Se crea una nueva columna para encapsular la fecha de nacimiento de las personas.		
		var _columnaFechaNacimiento= $((document).createElement('td'));
		
		//En caso de que la fecha venga en formato largo, se debera de obtener el formato corto para cuestiones de presentación.
		var _fechaCorta= item.fechaNacimiento.split(' ')[0];
		
		//Se da formato a la fecha para presentarla como DD/MM/YYYY.
		var _elementosFecha= _fechaCorta.split('-');
		var _fecha= _elementosFecha[2] + '/' + _elementosFecha[1] + '/' + _elementosFecha[0];
				
		//Se crea un nodo de texto y se le asigna la fecha de nacimiento de la persona.
		var _fechaNacimiento= $((document).createTextNode(_fecha));
		
		//Se anexa a la columna [_columnaFechaNacimiento] el nodo de texto.
		_columnaFechaNacimiento.append(_fechaNacimiento);
		
		//Se anexa la columna [_columnaFechaNacimiento] a la fila.
		$('#fila' + item.personaId).append(_columnaFechaNacimiento);
		
		//Genero
		
		//Se crea una nueva columna para encapsular el genero de de las personas.		
		var _columnaGenero= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el genero de la persona.
		var _genero= $((document).createTextNode((item.genero == 'F')? 'Femenino': 'Masculino'));
		
		//Se anexa a la columna [_columnaGenero] el nodo de texto.
		_columnaGenero.append(_genero);
		
		//Se anexa la columna [_columnaGenero] a la fila.
		$('#fila' + item.personaId).append(_columnaGenero);
	});		
}

Tabla.html

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta charset="utf-8">
	<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">    
	<link href="../css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="container">
		<div class="row">
			<br/>
			<div class="col-md-12">
				<div class="panel panel-primary">
					<div class="panel-heading">				
						<div style="text-align:center;">
							Creación de una tabla con JQuery
						</div>
					</div>
					<div class="panel-body">
						<div class="row">
							<div class="col-md-12">
								<button type="button" id="btnCreaTabla" name="btnCreaTabla" class="btn btn-success">Crear tabla
								</button>                            
							</div>
						</div>
						<br/>
						<div class="row">
							<div class="col-md-12">
								<div class="table-responsive">
									<table id="tblConsulta" class="table table-bordered table-hover textColor" style="width:100%;">
										<tr style="font-weight: bold; background-color: #373a3c; color: white;">                                        
											<td class="bold">#</td>
											<td class="bold">Nombre</td>																			
											<td class="bold">Fecha de Nacimiento</td>
											<td class="bold">Genero</td>											
										</tr>
									</table>
								</div>
							</div>
						</div>						
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="../scripts/jquery-2.2.1.js"></script>
	<script src="../scripts/bootstrap.js"></script>
	<script src="../scripts/helper.js"></script>
	
	<script type='text/javascript'>	
		$(document).ready(function()
		{
			//Se invoca la función para crear y mostrar la tabla cuando no hay origen de datos.
			MuestraPersonas('tblConsulta', null);
		
			//Se asocia el evento click al Button [btnCreaTabla].
			$('#btnCreaTabla').on('click', function()
			{				
				//Se invoca a la función para crear y mostrar la tabla con un origen de datos.
				MuestraPersonas('tblConsulta', ObtenDatos());
			});		
		});
	</script>
</body>
</html>

En el siguiente enlace podrás descargar el código fuente completo:

Tabla con JQuery.rar (215,67 kb)