Captar datos de tablas y mostrarlos

Marcos071 · #1 (**permalink**) 07/04/2011, 18:28

Hola, lo que me esta complicando en el diseño de este sitio es la captura de datos con javascript, justamente muestro en la imagen. Lo que quiero lograr es que al hacer click en alguna fila del listado de proveedores traido por php, debajo me aparezcan campos cargados con los demas datos que tiene el proveedor.

espero sepan entenderme...

Es decir, que al hacer click en cluster (por ejemplo), debajo de la tabla me muestre los campos completos de cluster, como ser, telefono1, telefono2, mail1, mail2, y otros detalles...

Uploaded with ImageShack.us

laratik · #2 (**permalink**) 07/04/2011, 18:43

Me imagino que el resto de datos que deseas se muestren en la parte inferior de la tabla se encuentra dentro de una base de datos en el servidor y lo que quieres es llamarlos con AJAX, si no es así, me podrías explicar de donde cargas los datos que deseas mostrar.

Marcos071 · #3 (**permalink**) 07/04/2011, 20:26

Claro, esa es la idea!

laratik · #4 (**permalink**) 07/04/2011, 20:52

si estoy bien enfocado, lo que deseas es algo como esto:

Código HTML:

<html> 
<head> 

<script>
function getXMLHttpRequest() {
	var xmlHttp;
	try {
		xmlHttp = new XMLHttpRequest();
	} catch(e1) {
		try {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e2) {
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e3) {
				xmlHttp = null;
			}
		}
	}
	return xmlHttp;
}

function requestAJAX(id) {
	var xmlHttp = getXMLHttpRequest();
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4) {
			var r = xmlHttp.responseText;
			document.getElementById("mostrar").innerHTML = r;
		}
	};
	xmlHttp.open("POST", "prueba.php", true);
	xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xmlHttp.send("dato="+id);
} 
</script> 
</head> 
<body> 
<table border="1">
	<tr onClick="requestAJAX('dato1')">
    	<td>Dato1</td><td>Dato1</td><td>Dato1</td><td>Dato1</td><td>Dato1</td><td>Dato1</td>
    </tr>
    <tr onClick="requestAJAX('dato2')">
    	<td>Dato2</td><td>Dato2</td><td>Dato2</td><td>Dato2</td><td>Dato2</td><td>Dato2</td>
    </tr>
</table>
<div id="mostrar"></div>
</body> 
</html>

Marcos071 · #5 (**permalink**) 09/04/2011, 00:58

claaaarooo...es justamente eso!! pero...como hago para discriminar que deseo tal campo del <td> y mostrarlo en un <input type='text' />

Osea

<html>
...
...
...
<table>
....
<tr onclick="requestAJAX('dato1')">
<td>proveedor1</td>
<td>43637773</td>
<td>rivadavia 23423</td>
<td>[email protected]</td>
</tr>
...
</table>
...
...
...
...
y luego tengo dentro de un <div> los demas campos que estarán vacíos si no ha presionado sobre ningun campo, pero se completa cuando lo haya presionado...

<input type="text" value="proveedor1" name="proveedor" />
<input type="text" value="43637773" name="telefono" />

....
...
y asi me seguira completando dichos campos que debajo muestro en la captura...

Uploaded with ImageShack.us

laratik · #6 (**permalink**) 11/04/2011, 11:04

ok y ¿como estamos en XML? me parece que esa es la solución más rápida para tu problema:

Código HTML:

<html> 
<head> 

<script>
function getXMLHttpRequest() {
	var xmlHttp;
	try {
		xmlHttp = new XMLHttpRequest();
	} catch(e1) {
		try {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e2) {
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e3) {
				xmlHttp = null;
			}
		}
	}
	return xmlHttp;
}

function requestAJAX(id) {
	var xmlHttp = getXMLHttpRequest();
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4) {
			var r = xmlHttp.responseXML;
			var form = document.getElementById("mostrar");
			form.telefono.value = r.getElementsByTagName("telefono").item(0).textContent;
			form.proveedor.value = r.getElementsByTagName("proveedor").item(0).textContent;
			form.direccion.value = r.getElementsByTagName("direccion").item(0).textContent;
		}
	};
	xmlHttp.open("POST", "prueba.php", true);
	xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xmlHttp.send("dato="+id);
} 
</script> 
</head> 
<body> 
<table border="1">
	<tr onClick="requestAJAX('dato1')">
    	<td>Dato1</td><td>Dato1</td><td>Dato1</td><td>Dato1</td><td>Dato1</td><td>Dato1</td>
    </tr>
    <tr onClick="requestAJAX('dato2')">
    	<td>Dato2</td><td>Dato2</td><td>Dato2</td><td>Dato2</td><td>Dato2</td><td>Dato2</td>
    </tr>
</table>
<div>
<form action="#" method="post" id="mostrar">
<label></label><input type="text" name="telefono" /><br/>
<label></label><input type="text" name="proveedor" /><br/>
<label></label><input type="text" name="direccion" /><br/>
</div>
</body> 
</html>

Código PHP:

  <?php 
$telefono = "55555555"; 
$proveedor = "LaRatik"; 
$direccion = "111111"; 
$xml="<?xml version=\"1.0\"?>\n"; 
$xml.="<datos>\n"; 
$xml.="<telefono>$telefono</telefono>\n"; 
$xml.="<proveedor>$proveedor</proveedor>\n"; 
$xml.="<direccion>$direccion</direccion>\n"; 
$xml.="</datos>\n"; 
header('Content-Type: text/xml'); 
echo $xml; 
?>

Solo debes generar la información que va a ser mostrada en los campos mediante un formato XML, aunque también puedes manejar JSON u otro tipo de formato, aunque la idea basica es mas o menos la misma. SALUDOS.