3

Saludos, tengo la siguiente tabla en la que voy añadiendo items.

<table  class="table table-hover">
        <thead>
          <tr>
            <th>Codigo</th>
            <th>Descripcion</th>
            <th>Cantidad</th>
            <th>Valor unitario</th>
            <th>Valor total</th>
          </tr>
        </thead>
        <tbody id="tabProd" name="ProdLista">
          <tr>

          </tr>
        </tbody>
</table>

Codigo Javascript con el cual añado las filas

<script>
        function funcionFilas() {
            if (document.getElementById("prod").value!=="" &&
                    document.getElementById("cant").value!=="" &&
                    document.getElementById("precUni").value!=="") {
            var table = document.getElementById("tabProd");
            var row = table.insertRow(0);
            var celda1 = row.insertCell(0);
            var celda2 = row.insertCell(1);
            var celda3 = row.insertCell(2);
            var celda4 = row.insertCell(3);
            var celda5 = row.insertCell(4);
            celda1.innerHTML = document.getElementById("prod").value;
            celda2.innerHTML = document.getElementById("prod").value;
            celda3.innerHTML = document.getElementById("cant").value;
            celda4.innerHTML = document.getElementById("precUni").value;
            var valunit=document.getElementById("precUni").value*document.getElementById("cant").value;
            celda5.innerHTML = valunit;
            row.addEventListener("click", (function(){ alert('seleccionado'); }));
            }
            else{
                alert('Ingrese los campos de Cantidad, precio y producto');
            }
        }

Mi pregunta es: ¿Cómo pasar todos los datos que haya almacenado dentro de esta tabla a un servlet?

2
  • ¿Cuál quieres que sea el formato?
    – Alvaro Montoro
    Commented el 3 oct. 2016 a las 4:15
  • Disculpa si no entiendo lo de formato :(, soy nuevo en desarrollo web
    – Leo T
    Commented el 3 oct. 2016 a las 15:42

2 respuestas 2

3

Supongamos que ingresas muchos datos a la tabla, lo mejor es que pienses en usar JSON para enviarlos al servlet mediante AJAX. Es la manera más amigable.

JavaScript

function tableToJSON() {
  let headers = document.querySelectorAll('th');
  let rows = document.querySelectorAll('tbody tr');
  let json = [];

  [].forEach.call(rows, (row, i) => {
    let cells = row.querySelectorAll('td');
    let data = {};
    cells.forEach.call(cells, (cell, x) => {
      let header = headers[x].textContent;
      let content = cell.textContent;
      data[header] = content;
    });
    json.push(data);
  });

  return json;
}

Esta sencilla función transforma una tabla formato JSON. Puedes editarla para evitar x columnas. Luego envías ese JSON por AJAX.

const form = document.getElementById('#form');


form.addEventListener('submit', handleFormSubmit);

function handleFormSubmit(e) {
  e.preventSubmit(); // evitamos el submit del fofrm
  let xhr = new XMLHttpRequest();
  xhr.open('POST', '/TuServlet');
  xhr.onload = function() {
    if(xhr.readyState === 4) {
      if(xhr.status === 200) {
        resetTable();
      } else {
        // ocurrió un error, manejarlo
      }
    }
  }
  xhr.send('data='+JSON.stringify(
    tableToJSON('tbl-people')
  ));
}

Java

En el servlet obtienes el JSON y con ayuda de la librería oficial para Java podemos mapear ese JSON a objetos Java.

String data = request.getParameter('data');
JSONArray array = new JSONArray(data);

// hacer algo con el json, por ejemplo leemos el primer objecto    
JSONObject fila1 = array.getJSONObject(0);
String producto = fila1.get('producto');
int cantidad = Integer.parseInt(fila1.get('cantidad'));

Puedes ver la API aquí.


Para hacer un submit clásico, puedes hacer uso de cajas de texto ocultas para que al enviar el formulario, enviar éstos. Para eso debes de crear una caja de texto oculta cada vez que agregas una nueva fila.

celda5.innerHTML = valunit; // luego de ésta línea

var hidden0 = document.createElement('input');
hidden0.setAttribute('type', 'hidden');
hidden0.setAttribute('name', 'producto');
hidden0.value = document.getElementById("prod").value;
celda0.appendChild(hidden0);
// lo mismo para cada celda

Y al enviar el formulario, en el servlet obtienes los valores. Por ejemplo:

String[] productos = request.getParameterValues('producto');
2
  • Muchas gracias MitsuG, justamente estaba revisando la parte de JSON, y tambien la parte de campos ocultos, me sirvio mucho tu respuesta
    – Leo T
    Commented el 6 oct. 2016 a las 4:49
  • Si te sirvió mi respuesta considera marcarla como correcta :)
    – gugadev
    Commented el 6 oct. 2016 a las 11:54
2

Puedes utilizar una función que recoja los valores de cada elemento de la tabla y enviarlo a una url

    function enviar(){
        urlDestino = "http://destino.com";

        datosEnvio = "?prod=" + document.getElementById("prod").value + "&cant=" + document.getElementById("cant").value + "&precUni=" + document.getElementById("precUni").value;

        window.location.replace(urlDestino + datosEnvio);
    }
1
  • Gracias José por tu respuesta, sin embargo lo que busco es almacenar todas las filas que haya añadido en la tabla y de ahi redireccionar al servlet puesto que la tabla esta dentro de un formulario y quiero recibir en el servlet todos los datos del formulario. En este caso no se si deba almacenar las filas en un array haciendole cadena como tu lo haces pero lo que no tengo claro es si al declarar un array en js, lo reconozca en el servlet
    – Leo T
    Commented el 3 oct. 2016 a las 15:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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