Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] de tabla HTML a PHP

Estas en el tema de de tabla HTML a PHP en el foro de Javascript en Foros del Web. Buenas tardes compañeros del foro. tengo un dilema el cual llevo pensando ya mucho tiempo. Tengo una tabla que almacena una lista de productos hecha ...
  #1 (permalink)  
Antiguo 23/01/2018, 14:56
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
de tabla HTML a PHP

Buenas tardes compañeros del foro.
tengo un dilema el cual llevo pensando ya mucho tiempo.
Tengo una tabla que almacena una lista de productos hecha en HTML.
y quiero pasar todos los datos de esa tabla a PHP para luego almacenar esos datos
en una base de datos hecha en mysql.

Este es el codigo en JS para obtener los datos de cada fila de la tabla
Código Javascript:
Ver original
  1. var tabla=document.getElementById("tablaDinamica");
  2. var filas=tabla.getElementsByTagName("tr");// arreglo
  3. var totalFilas=filas.length;//entero
  4. var arregloFila=new Array(totalFilas);
  5.  
  6. //almaceno en el arreglo cada fila de la tabla
  7. for(var i=1;i<totalFilas;i++){
  8.         arregloFila[i]=filas[i];
  9.     }
  10. }

En el arreglo "arregloFila" almacenè todas las filas y los datos de la tabla.
Ahora lo que quiero es pasar la informacion que guardè en esa variable a PHP para luego guardar esa informacion en la BD.

De antemano muchas gracias a las personas de voluntad.
  #2 (permalink)  
Antiguo 23/01/2018, 17:03
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.346
Antigüedad: 3 años
Puntos: 252
Respuesta: de tabla HTML a PHP

bueno eso seria sencillo de hacer, siempre que dichas como esta estructurada la data del array, lo pregunto porque no veo que leas el contenido de los td y tampoco los estés ordenando en el array para su procesamiento en php. Muestra dicha estructura y veremos
__________________
[email protected]
HITCEL
  #3 (permalink)  
Antiguo 23/01/2018, 21:18
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.373
Antigüedad: 6 años, 7 meses
Puntos: 911
Respuesta: de tabla HTML a PHP

Como bien dices, estás almacenando a las filas y los datos contenidos en ellas. Sin embargo, lo conveniente sería que leas el contenido de las celdas que integran a cada fila. Por otro lado, por una cuestión de orden y facilidad en la manipulación de los datos obtenidos, sería muy útil que almacenes dichos datos en objetos literales, mismos que almacenarías en el arreglo que finalmente enviarías al archivo PHP que los vaya a procesar. Si deseas que todo el proceso se realice sin recargar la página, necesitarás utilizar una petición asíncrona. Para enviar el arreglo, puedes parsearlo a JSON usando el método JSON.stringify() y decodificarlo en PHP con la función json_decode().

Código Javascript:
Ver original
  1. var data = [], objeto, celdas;
  2.  
  3. [].forEach.call(tabla.querySelectorAll("tr"), function(tr){
  4.     celdas = tr.querySelectorAll("td");
  5.     objeto = {
  6.         valor1: celdas[0].innerHTML,
  7.         valor2: celdas[1].innerHTML,
  8.         valor3: celdas[2].innerHTML
  9.     };
  10.     data.push(obj);
  11. });
  12.  
  13. //...
  14.  
  15. var ajax = new XMLHttpRequest();
  16.  
  17. ajax.open("POST", "ejemplo.php");
  18. ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  19. ajax.send("data=" + JSON.stringify(data));

Código PHP:
Ver original
  1. $data = json_decode($_POST['data']);
  2.  
  3. foreach ($data as $object){
  4.     echo $object->valor1; //El valor de la primera celda de la fila actual en el bucle
  5.     echo $object->valor2; //El valor de la segunda celda de la fila actual en el bucle
  6.     echo $object->valor3; //El valor de la tercera celda de la fila actual en el bucle
  7. }

Y si quisieras reutilizar el código para tablas con filas de mayor, menor o igual cantidad de celdas:

Código Javascript:
Ver original
  1. [].forEach.call(tabla.querySelectorAll("tr"), function(tr){
  2.     objeto = {}, i = 0;
  3.     [].forEach.call(tr.querySelectorAll("td"), function(td){
  4.         objeto["valor" + (++i)] = td.innerHTML;
  5.     });
  6.     data.push(obj);
  7. });

Código PHP:
Ver original
  1. $data = json_decode($_POST['data']);
  2.  
  3. foreach ($data as $object){
  4.     foreach ($object as $value){
  5.         echo $value;
  6.     }
  7. }

__________________
«Laissez faire et laissez passer, le monde va de lui même»

Última edición por Alexis88; 23/01/2018 a las 23:04 Razón: Mejora
  #4 (permalink)  
Antiguo 24/01/2018, 06:42
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

Buenos dias compañeros.
Les confieso que me diò mucha dicha cuando vi sus respuestas a lo temprano de la mañana. Muchas gracias.

Bueno, en respuesta a xfxstudios: lo que hize fuè guardar cada fila en el arreglo y como cada fila es un arreglo de arreglos no vi nesezario recorrer tambien las filas del mismo, es decir:
Código Javascript:
Ver original
  1. arregloFila[0].childNodes[0].textContent;//dice lo que hay en la columna 0 de la fila 0
  2. arregloFila[0].childNodes[1].textContent;//dice lo que hay en la columna 1 de la fila 0
  3. arregloFila[0].childNodes[2].textContent;//dice lo que hay en la columna 2 de la fila 0
pensè en recorrer cada celda de la tabla a la hora de copiar los datos a la BD.
Si estoy equivocado, te pido que por favor disculpes mi ignorancia.

En respuesta a Alexis88: estuve leyendo en un articulo de como utilizar forEach y lo que entendì fuè que que esa manera es deprecated y que es mejor utilizar los bucles for.
esta es la direccion de la pagina: https://developer.mozilla.org/es/doc.../for_each...in

Y despues de tratar de entender tu codigo me di cuenta que ese objeto literal es para recorrer toda la tabla y en la variable data guardar los valores para asi enviarlos a la BD por medio de ajax. Que inteligente.
Y pues francamente nunca habia utilizado esa manera de recorrer un arreglo. Siempre utilizo los bucles while o for.

Estoy muy agradecido con ustedes dos.
Gracias.
  #5 (permalink)  
Antiguo 24/01/2018, 08:11
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.373
Antigüedad: 6 años, 7 meses
Puntos: 911
Respuesta: de tabla HTML a PHP

Estimado dacroma:

Me temo que encontraste el enlace equivocado. La documentación del método .forEach() es esta. De hecho, lo que ves en el código que escribí, es decir, esto: [].forEach.call(), es una manera abreviada de esto: Array.prototype.forEach().

De cualquier manera, da igual la estructura cíclica que utilices. La idea es recorrer al conjunto de elementos para obtener los datos.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #6 (permalink)  
Antiguo 24/01/2018, 16:10
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

Ajj Ok.
Muchas gracias.
La solucion igual me la diste a entender con el uso de AJAX.
  #7 (permalink)  
Antiguo 27/01/2018, 10:52
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

No he podido solucionar el problema.

este es el codigo de lo que estoy tratando de hacer.
cambiè el valor de la tabla por el valor de un span para simplificar el problema.

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <meta charset="utf-8">
  3.   <title>Problema</title>
  4.   <script src="POST.js"></script>
  5. </head>
  6.  
  7.     <span id="enviar" name="span">click aqui</span>
  8.     <div id="resultados"></div>
  9. </body>
  10. </html>

Código Javascript:
Ver original
  1. addEventListener('load',inicializarEventos,false);
  2.  
  3. function inicializarEventos()
  4. {
  5.   var ref=document.getElementById('enviar');
  6.   ref.addEventListener('click',enviarDatos,false);
  7. }
  8.  
  9. function enviarDatos(e)
  10. {
  11.   e.preventDefault();
  12.   enviarFormulario();
  13. }
  14.  
  15. var conexion1;
  16. function enviarFormulario()
  17. {
  18. var valor = document.getElementById("enviar").textContent;//lo intentè con innerHTML Y TAMPOCO
  19.   conexion1=new XMLHttpRequest();
  20.   conexion1.onreadystatechange = procesarEventos;
  21.   conexion1.open('POST','POST.php', true);
  22.   conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  23.   conexion1.send(valor);
  24. }
  25.  
  26. function procesarEventos()
  27. {
  28.   var resultados = document.getElementById("resultados");
  29.   if(conexion1.readyState == 4)
  30.   {
  31.     resultados.innerHTML = 'Gracias.';
  32.   }
  33.   else
  34.   {
  35.     resultados.innerHTML = 'Procesando...';
  36.   }
  37. }

Código PHP:
Ver original
  1. <?php
  2. header('Content-Type: text/html; charset=ISO-8859-1');
  3. echo ".$_REQUEST['span']";
  4. ?>

Ayudenme por favor.
  #8 (permalink)  
Antiguo 27/01/2018, 11:15
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.373
Antigüedad: 6 años, 7 meses
Puntos: 911
Respuesta: de tabla HTML a PHP

Esto:

Código Javascript:
Ver original
  1. addEventListener('load',inicializarEventos,false);

No está siendo asociado a ninguna parte.

Esta forma es más eficiente para lo que buscas hacer ya que no es necesario esperar a la carga del contenido multimedia:

Código JavaScript:
Ver original
  1. document.addEventListener("DOMContentLoaded", inicializarEventos);

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #9 (permalink)  
Antiguo 27/01/2018, 11:26
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

Hize como me dijiste pero no. aun no lo resuelvo.

Lo que nesecito es pasar el valor de ese SPAN que es ("click aqui") y guardarlo en una variable php y luego utilizar esa variable para enviarla a la bd, y pues para comprobar que esa variable sì se va a enviar a la BD lo que estoy intentado es recuperar el valor de esa variable de php al DIV con id="resultados".

O tu como arias el codigo para cumplir con lo que quiero.
disculpa mi ignorancia.

Última edición por dacroma; 27/01/2018 a las 11:32
  #10 (permalink)  
Antiguo 27/01/2018, 11:56
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.373
Antigüedad: 6 años, 7 meses
Puntos: 911
Respuesta: de tabla HTML a PHP

Para enviar el valor por POST, debes crear una cadena de consulta, compuesta por una variable y un valor:

Código Javascript:
Ver original
  1. conexion1.send("span=" + valor);

Y así podrás recibirlo en el archivo PHP:

Código PHP:
Ver original
  1. $_POST['span'];

Siempre fíjate bien en los ejemplos que te proporcionan.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #11 (permalink)  
Antiguo 27/01/2018, 12:24
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

Mira y jusga.

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <meta charset="utf-8">
  3.   <title>Problema</title>
  4.   <script src="POST.js"></script>
  5. </head>
  6.  
  7.     <span id="enviar" name="span">click aqui</span>
  8.     <div id="resultados"></div>
  9. </body>
  10. </html>

Código Javascript:
Ver original
  1. addEvent(windows,"load",inicializarEventos, false);
  2.  
  3. function inicializarEventos()
  4. {
  5.   var ref=document.getElementById('enviar');
  6. addEvent(ref,"click",enviarDatos, false);
  7. //  ref.addEventListener('click',enviarDatos,false);
  8. }
  9.  
  10. function enviarDatos(e)
  11. {
  12.   e.preventDefault();
  13.   enviarFormulario();
  14. }
  15.  
  16. var conexion1;
  17. function enviarFormulario()
  18. {
  19. var valor = document.getElementById("enviar").textContent;
  20.   conexion1=new XMLHttpRequest();
  21.   conexion1.onreadystatechange = procesarEventos;
  22.   conexion1.open('POST','POST.php', true);
  23.   conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  24.   conexion1.send("span="+valor);  
  25. }
  26.  
  27. function procesarEventos()
  28. {
  29.   var resultados = document.getElementById("resultados");
  30.   if(conexion1.readyState == 4)
  31.   {
  32.     resultados.innerHTML = conexion1.responseText;
  33.   }
  34.   else
  35.   {
  36.     resultados.innerHTML = 'Procesando...';
  37.   }
  38. }
  39.  
  40.  
  41.  
  42. function addEvent(elemento,evento,metodo,estado){
  43.     if(elemento.attachedEvent)
  44.         elemento.attachEvent("on"+evento,metodo);
  45.     else
  46.     if(elemento.addEventListener)
  47.         elemento.addEventListener(evento,metodo,estado);
  48.  
  49. }

Código PHP:
Ver original
  1. <?php
  2. header('Content-Type: text/html; charset=ISO-8859-1');
  3. echo "$_POST['span'];";
  4. ?>
No encuentro el error.
  #12 (permalink)  
Antiguo 27/01/2018, 12:34
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.373
Antigüedad: 6 años, 7 meses
Puntos: 911
Respuesta: de tabla HTML a PHP

Pulsa la tecla F12, espera a que se visualice un panel que se desplegará, recarga la página y ejecuta el mismo proceso. Fíjate en la pestaña "Console" si se muestra algún mensaje de error. Si no hay nada, selecciona la pestaña "Network" y, en la lista de archivos que se mostrará en el panel desplegado, selecciona el que tenga el nombre del archivo PHP hacia el cual enviaste el dato. En el segundo panel que se desplegará, selecciona la pestaña "Response" y observa la respuesta que obtienes.

Avísanos sobre cómo te fue con eso para poder seguir ayudándote.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #13 (permalink)  
Antiguo 27/01/2018, 12:47
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

este es lo que dice:

Uncaught ReferenceError: windows is not defined(anonymous function) @ POST.js:1
  #14 (permalink)  
Antiguo 27/01/2018, 12:49
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.373
Antigüedad: 6 años, 7 meses
Puntos: 911
Respuesta: de tabla HTML a PHP

Es obvio: no existe windows sino window, en singular.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #15 (permalink)  
Antiguo 27/01/2018, 12:50
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

ahora dice esto:
POST.js:24 XMLHttpRequest cannot load file:///K:/DIEGO/programacion%20web/AJAX/POST.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.enviarFormulario @ POST.js:24enviarDatos @ POST.js:13
  #16 (permalink)  
Antiguo 27/01/2018, 12:58
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.373
Antigüedad: 6 años, 7 meses
Puntos: 911
Respuesta: de tabla HTML a PHP

Tal parece que no estás trabajando con tu servidor local. Si usas WAMP, XAMPP o Apache, aloja tus archivos en el directorio respectivo y ejecuta tu aplicación web usando la respectiva dirección. Por ejemplo, yo uso WAMP y almaceno los archivos en: C:\wamp\www. Allí creo una carpeta para cada proyecto y en dicha carpeta se encuentran los archivos PHP, JS, HTML, CSS. Si tu carpeta "programacion web" (sería mejor que uses nombres sin espacios) estuviera alojada en C:\wamp\www, accederías mediante la dirección: localhost/programacion web. Si no estás familiarizado con el tema, te recomiendo leer libros o ver vídeos sobre configuración de servidores web locales.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #17 (permalink)  
Antiguo 27/01/2018, 13:14
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

ya puse los archivos en C:\wamp\www
y me sigue dando el mismo error. Ejecutando desde la misma carpeta del servidor(doble click en el archivo html).

Última edición por dacroma; 27/01/2018 a las 13:29
  #18 (permalink)  
Antiguo 27/01/2018, 13:47
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.373
Antigüedad: 6 años, 7 meses
Puntos: 911
Respuesta: de tabla HTML a PHP

Las aplicaciones web no se ejecutan con un doble clic. Debes abrir el navegador web y escribir la dirección en la barra, por ejemplo: http://localhost/programacion web. Lógicamente, primero debes asegurarte de que tu servidor local esté en ejecución.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #19 (permalink)  
Antiguo 27/01/2018, 14:05
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

si vez que el codigo està bien, entonces voy a desintalar wampserver y lo voy a instalar nuevamente por que le hago de muchas formas y el error sigue siendo el mismo.
  #20 (permalink)  
Antiguo 27/01/2018, 15:03
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

Hola alexis.
ya instalè nuevamente el servidor, corre y me sale el siguiente error al aplicar el evento en el span.
Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in C:\wamp\www\POST.php on line 3

Última edición por dacroma; 27/01/2018 a las 15:16
  #21 (permalink)  
Antiguo 27/01/2018, 15:22
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.373
Antigüedad: 6 años, 7 meses
Puntos: 911
Respuesta: de tabla HTML a PHP

Prueba imprimiendo la variable sin las comillas dobles:

Código PHP:
Ver original
  1. echo $_POST['span'];

De hecho, no son necesarias para imprimir el valor de una variable. Si persiste el problema, verifica el contenido de la variable usando la función var_dump().

Código PHP:
Ver original
  1. var_dump($_POST['span']); //Aquí no hace falta el "echo"

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #22 (permalink)  
Antiguo 27/01/2018, 15:33
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 115
Antigüedad: 5 años, 1 mes
Puntos: 2
Respuesta: de tabla HTML a PHP

Eres muy inteligente, no hubiese resuelto este problema sino hubieses estado aqui.
como hago para darte puntos o aumentarte la puntuacion.
Mi problema fuè resuelto con exito.
Muchas gracias.
  #23 (permalink)  
Antiguo 27/01/2018, 15:52
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.373
Antigüedad: 6 años, 7 meses
Puntos: 911
Respuesta: de tabla HTML a PHP

De nada. Un saludo.
__________________
«Laissez faire et laissez passer, le monde va de lui même»



La zona horaria es GMT -6. Ahora son las 03:32.