Estoy desarrollando un pagina, y nesecito traer todos los productos de la base de datos.
La tabla de productos posee los siguientes atributos:
marca : marca del producto
modelo : modelo del producto
precio : precio del producto
detalle : detalle del producto
cantidad : cantidad disponible
Estos son los 3 archivos con los cuales estoy trabajando:
index.html : llama a la funcion "processData()" del archivo procesoJS.js.
procesoJS.js : interactua con el archivo "proceso.php" y recoge los datos xml.
proceso.php : recupera los datos de la tabla productos, y le da formato XML.
::::::::::Mi problema es el siguiente::::::::::
Cuando cargo los datos en la tabla que se encuentra en el "index.html", se sobreescriben los datos obtenidos, es decir, si tengo dato 1, luego es sobreescrito o tapado por dato 2, y dato 2 sera tapado o sobreescrito por dato 3, y asi sucesivamente.
¿ Como puedo insertar los datos sin que me sobreescriba los datos ya recuperados ?
Esta imagen es un resumen de lo que trato de hacer :
elrincondejavier.net/html/images/articulos
/Tabla%20de%20datos.jpg
index.html
Código HTML:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Parrillla de Datos</title> <script language="javascript" src="procesoJS.js"></script> </head> <body> <font color="#FF0000"><b><div id="esta"></div></b></font> <h1>Productos obtenidos de la Base de Datos</h1> <form> <input type="button" value="ver productos" onclick="processData();" /> </form> <table border="1"> <tr> <td id="id"></td> <td id="marca"></td> <td id="modelo"></td> <td id="precio"></td> <td id="cant"></td> <td id="det"></td> </tr> </table> </body> </html>
javascript (Ajax)
Código HTML:
function getXMLHTTPRequest() { try { req = new XMLHttpRequest(); } catch(err1) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch (err3) { req = false; } } } return req; } ajax=getXMLHTTPRequest(); function processData() { ajax.open("GET","proceso.php",true); ajax.onreadystatechange=function(){ if(ajax.readyState==4) { if(ajax.status == 200) { var dato = ajax.getElementsByTagName("id"); for(var i=0; i < dato.length; i++) { var id = ajax.getElementsByTagName("id")[i].childNodes[0].nodeValue; var marca = ajax.getElementsByTagName("marca")[i].childNodes[0].nodeValue; var modelo = ajax.getElementsByTagName("modelo")[i].childNodes[0].nodeValue; var precio = ajax.getElementsByTagName("precio")[i].childNodes[0].nodeValue; var cant = ajax.getElementsByTagName("cantidad")[i].childNodes[0].nodeValue; var det = ajax.getElementsByTagName("detalle")[i].childNodes[0].nodeValue; document.getElementById("id").innerHTML=id; document.getElementById("marca").innerHTML=marca; document.getElementById("modelo").innerHTML=modelo ; document.getElementById("precio").innerHTML=precio ; document.getElementById("cant").innerHTML=cant; document.getElementById("det").innerHTML=det; }//cierra for.- }//cierra status==200.- }//cierra onreadyState==4.- }; ajax.send(null); }//cierra funcion processData.-
php
Código PHP:
<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\" ?>";
$con=mysql_connect("127.0.0.1","root","root") or die("error de conexion");
mysql_select_db("carrito") or die("esta db no existe");
$res=mysql_query("select * from productos limit 2") or die("error de consulta");
echo "<productos>";
for($i=0;$i < mysql_num_rows($res);$i++)
{
$fila=mysql_fetch_array($res);
echo"<producto>";
echo "<id>".$fila['id_producto']."</id>";
echo "<marca>".$fila['marca']."</marca>";
echo "<modelo>".$fila['modelo']."</modelo>";
echo "<precio>".$fila['precio']."</precio>";
echo "<cantidad>".$fila['cantidad']."</cantidad>";
echo "<detalle>".$fila['detalle']."</detalle>";
echo"</producto>";
}
echo "</productos>";
?>