AJAX y DOM, mostrar una tabla
En el ejemplo anterior vimos los resultados en una tabla con PHP y luego con AJAX lo mostramos en un objeto contenedor (etiqueta div), ahora crearemos la tabla (etiqueta table) con DOM, esta vez AJAX nos servirá para obtener los datos con XML.
Este ejercicio sirve como un ejemplo para saber como crear la tabla con DOM, en mi experiencia les recomendaría que cosas simples lo realicen con procedimientos simples, como el ejemplo anterior con PHP, sólo usen DOM cuando observen que sus proyectos necesiten ser mejorados.
Empecemos, la idea es para este ejemplo, primero cargar la lista desplegable con los departamentos usando AJAX (ya lo vimos en el tercer caso de llenar una lista dinámicamente con AJAX), al seleccionar el departamento, utilizamos AJAX para hacer la petición a un script PHP prov.php y los resultados lo mostraremos en una tabla creada con DOM.
Empezemos, nuevamente creamos un script html dinámico gracias a la magia de AJAX; usaremos un script externo para todo lo referente a JS.
tabla_dom.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script language="JavaScript" type="text/javascript" src="tabla.js"></script> </head> <body> <select id="idDep"> <option value="-1">Seleccione</option> </select> <div id="idTab"> </div> </body> </html>
El script JS siguiente contiene el creador del objeto AJAX y además la función que cargará los departamentos, varía del tercer caso que vimos porque tenemos un elemento más «Seleccione» en la primera posición.
tabla.js
var obXHR;
try {
obXHR=new XMLHttpRequest();
} catch(err) {
try {
obXHR=new ActiveXObject("Msxml2.XMLHTTP");
} catch(err) {
try {
obXHR=new ActiveXObject("Microsoft.XMLHTTP");
} catch(err) {
obXHR=false;
}
}
}
function carga_dpto() {
var obCon = document.getElementById("idDep");
obXHR.open("GET", "dpto.php");
obXHR.onreadystatechange = function() {
if (obXHR.readyState == 4 &amp;amp;amp;amp;&amp;amp;amp;amp; obXHR.status == 200) {
obXML = obXHR.responseXML;
obCod = obXML.getElementsByTagName("codigo");
obDes = obXML.getElementsByTagName("descri");
obCon.length=obCod.length+1;
for (var i=1; i< =obCod.length;i++) {
obCon.options[i].value=obCod[i-1].firstChild.nodeValue;
obCon.options[i].text=obDes[i-1].firstChild.nodeValue;
}
}
}
obXHR.send(null);
}
Agregamos el evento onload al body para cargar los departamentos con AJAX.
tabla_dom.html
<body <strong>onload="carga_dpto()"> <select id="idDep">
Hasta este momento debemos tener cargado los departamentos en la lista, agregamos un evento onchange a la lista para que cuando cambie de valor solicite las provincias con AJAX enviando el código del departamento seleccionado.
tabla_dom.html
<body onload="carga_dpto()"> <select id="idDep" <strong>onchange="tabla()"> <option value="-1">Seleccione</option>
y por último la función tabla.
tabla.js
}
function tabla() {
obDiv = document.getElementById("idTab");
obDiv.innerHTML="";
obTab = document.createElement("table");
obDiv.appendChild(obTab);
obTab.border=1;
obTab.width="25%";
var tr = obTab.insertRow(-1);
var th = document.createElement('th');
th.innerHTML="Cod";
tr.appendChild(th);
var th = document.createElement('th');
th.innerHTML="Nombre";
tr.appendChild(th);
obSel = document.getElementById("idDep");
ind = (obSel.options[obSel.selectedIndex].value);
obXHR.open("GET", "prov.php?dep="+ind);
obXHR.onreadystatechange = function() {
if (obXHR.readyState == 4 &amp;amp;amp;amp;&amp;amp;amp;amp; obXHR.status == 200) {
obXML = obXHR.responseXML;
obCod = obXML.getElementsByTagName("codigo");
obDes = obXML.getElementsByTagName("descri");
for (var i=0; i<obcod .length;i++) {
var tr = obTab.insertRow(-1);
// Primera forma
var td = document.createElement("td");
td.align="center";
td.innerHTML=obCod[i].firstChild.nodeValue;
tr.appendChild(td);
// Segunda forma
tr.insertCell(1).innerHTML=obDes[i].firstChild.nodeValue;
}
}
}
obXHR.send(null);
}
Explicamos algunas líneas nuevas de esta función
obDiv = document.getElementById(«idTab»);
obDiv.innerHTML=»»;
Accedemos al objeto contenedor Div donde veremos los resultados y luego limpiamos los valores que contengan, esto para que no agregue una tabla luego de la otra con los departamentos que selecciones en cada momento.
obTab = document.createElement(«table»);
obDiv.appendChild(obTab);
obTab.border=1;
obTab.width=»25%»;
Hemos creado un objeto table y le agregamos al objeto contenedor, le indicamos en sus atributos border y width el ancho del borde y el ancho de la tabla.
var tr = obTab.insertRow(-1);
var th = document.createElement(‘th’);
th.innerHTML=»Cod»;
tr.appendChild(th);
var th = document.createElement(‘th’);
th.innerHTML=»Nombre»;
tr.appendChild(th);
Creamos un objeto fila (row) y luego un objeto td (table data), insertamos los textos y agregamos a la tabla.
obSel = document.getElementById(«idDep»);
ind = (obSel.options[obSel.selectedIndex].value);
Tomamos el valor del departamento de la lista desplegable.
Abrimos el objeto AJAX y procesamos el detalle de la tabla, utilizamos dos formas de agregar un td.
obXHR.open(«GET», «prov.php?dep=»+ind);
obXHR.onreadystatechange = function() {
if (obXHR.readyState == 4 && obXHR.status == 200) {
obXML = obXHR.responseXML;
obCod = obXML.getElementsByTagName(«codigo»);
obDes = obXML.getElementsByTagName(«descri»);
for (var i=0; i<obCod.length;i++) {
var tr = obTab.insertRow(-1);
// Primera forma
var td = document.createElement(«td»);
td.align=»center»;
td.innerHTML=obCod[i].firstChild.nodeValue;
tr.appendChild(td);
// Segunda forma
tr.insertCell(1).innerHTML=obDes[i].firstChild.nodeValue;
}
}
}
Finalmente enviamos la petición AJAX.
Fin de la explicación de crear la tabla, estúdienlo cualquier comentario consúltenme, agregamos algo de color con CSS
tabla_dom.html
<title>AJAX y DOM mostrar una tabla</title><strong>
<style>
td {
background-color: #FFFFCC;
color: #000066;
}
th {
background-color: #000099;
color: #FFFFFF;
font-weight: bold;
}
</style>
<script language="JavaScript" type="text/javascript" src="tabla.js"></script>
Espero que con paciencia hayan llegado hasta acá y disfrutado de los resultados. hasta pronto.
Cheers for publishing this it was note for a paper I am currently writing for my thesis. Thanks
Discount Gucci Store
/*****prov.php solo adaptar a su BD (es igual a dpto.php solo agregando el where)*******/
<?php
$cn = mysql_connect("localhost","root","");
mysql_select_db("directorio");
$sql="SELECT * FROM plaza WHERE id_plaza = ".$_GET['dep'];
$rs=mysql_query($sql);
header('Content-Type: text/xml');
echo "\n»;
echo «\n»;
while ($reg=mysql_fetch_array($rs)){
echo «»;
echo «».$reg[‘id_plaza’].»»;
echo «».$reg[‘region’].»»;
echo «\n»;
}
echo «»;
?>
si quieres darte una idea de que hace prov.php abrela con http://www.antoniorios.net/blog/ejemplos/prov.php?dep=1 te mostrara el analisis a un xml, ya nomas dale ver codigo fuente y veraz como se ve el archivo para el elemento «1» solo faltaria hacerlo dinamico con consulta a al BD y manteniendo ese esquema de XML
Sabes estuve viendo el ejemplo, pero tengo una consulta, en el js pide un archivo llamado prov.php, que es lo que se hace en ese archivo?.
Y gracias por el ejemplo.
Hola realmente tu ejemplo me ha servido de mucho pero requiero que mi tabla tenga una tercera columna ya sea con un botón o con una imagen que me permita por ejemplo cargar los datos del elemento de esa tabla en unos input text, pero n me doy idea sobre agregar el boton y programarle algun evento.. Sería mucho pedir si me pudieras orientar en ese aspecto mil gracias de antemano 😀