
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>";
?>    
 
 
 
 
 
 
 
 
 
 
 
