Weblog de Antonio Ríos

AJAX y DOM, mostrar una tabla

Tabla con AJAX y PHPEn 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 && 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

</head><body 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” 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 && 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>
<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>

Ver esta entrada mejorada, demostración y descargas en:

http://www.antoniorios.net

Espero que con paciencia hayan llegado hasta acá y disfrutado de los resultados. hasta pronto.

Junio 6, 2008 - Publicado por antoniorios | Ajax, Javascript, Table | | Aún no hay comentarios

Aún no hay comentarios.

Deja un comentario

« Anterior | Siguiente »