0

he estado lidiando con esto hace mucho tiempo, y soy muy novato en el tema. Tengo una tabla dinámica con productos que necesitan ser enviados hacia la base de datos. Me gustaría de algún modo enviar toda la tabla HTML hacia MySQL y no he podido lograrlo.

 <!-- Bootstrap CSS CDN -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tabla1" class="table-bordered table-sm">
  <thead>
    <tr>
      <th>Cod</th>
      <th>Nombre</th>
      <th>Cod-trans</th>
      <th>Fecha</th>
      <th>Tipo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>7454</td>
      <td>Impresora</td>
      <td>000-432-6456</td>
      <td>2019-10-01</td>
      <td>Articulo1</td>
    <tr>
    <tr>
      <td>7259</td>
      <td>Cartucho AB2</td>
      <td>000-312-3478</td>
      <td>2019-10-02</td>
      <td>Articulo6</td>
    <tr>
    <tr>
      <td>7454</td>
      <td>Impresora</td>
      <td>000-432-6456</td>
      <td>2019-10-01</td>
      <td>Articulo1</td>
    <tr>
    <tr>
      <td>6232</td>
      <td>CartuchoA125</td>
      <td>000-915-9321</td>
      <td>2019-10-01</td>
      <td>Articulo15</td>
    <tr>
  </tbody>
</table>
<br>
<input id="btn_enviar" type="button" class="btn-sm btn-primary" value="enviar">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Doy como ejemplo una tabla sencilla que posee 5 columnas. ¿Cómo puedo crear un array con los datos de esta tabla y que se puedan insertar completamente los datos a MySQL? ¿Cómo puedo enviar esto con Ajax?

2 respuestas 2

1

Planteamiento:

Piensa como si fuera un array bidimiensional. Los elementos tr son la primera "dimension" y los elementos td son las segunda.
Pensando en eso lo que he hecho ha sido recorrer con JQuery cada elemento tr de #tabla1 tbody y luego en cada tr he recorrido los elementos td y añadido su texto a un array. Y el array generado se inserta dentro de un array general.

Básicamente, genera un array bidimensional con los datos

Solución:

$(document).ready(function(){
  $("#btn_enviar").click(function(){
    //Declaramos el array general
    var todo=[];
    //Recorremos cada tr dentro de #tabla1 tbody
    $("#tabla1 tbody tr").each(function(){
        //Declaramos el array de cada línea de la tabla
        var ele=[];
        //Buscamos en el elemento tr cada elemento td
        $(this).find("td").each(function(){
            //Añadimos al array de la tabla el contenido.
            //.text() cojera solo el texto aunque exista dentro html
            ele.push($(this).text());
        });
        //Añadimos el array de la linea al array general
        todo.push(ele);
    });
    console.log(todo);
  });
});

Luego en PHP solo tienes que recorrer los datos con un bucle dentro de otro

IMPORTANTE: Te has dejado los <tr> de <tbody> sin cerrar

1
  • Excelente gracias por la aclaración.
    – h6gignacio
    el 29 nov. 2019 a las 4:10
0

Normalmente, se utiliza los datos de la base de datos para armar la tabla. Ya que la tabla html es la que vas a mostrar finalmente a tu cliente.
Ahora, a tu respuesta. Si realmente quieres guardar ese html en un campo de base de datos.

Puedes convertir toda la tabla en un string y guardar como cualquier otro dato, asegurate que tu campo sea de tipo text o longtext y listo. En jquery el codigo sería así:

var tabla1 = $("#tabla1").outerHTML;

jquery.outerHtml

Entonces desde ahí ya es cuestión de enviar por ajax.

1
  • Hola Pablo, la tabla lo tengo y traida desde mysql.. sólo lo hice de manera básica para que me ayuden a crear el código para generar el array. ¿ Cómo puedo generar la tabla como un string? estoy hablando de una cantidad de 20 filas. Por eso estoy buscando la forma de generar arrays por columna y así poder enviar con PHP
    – h6gignacio
    el 29 nov. 2019 a las 1:21

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.