Pass HTML table data to servlet

Suppose you enter a lot of data into the table, it is best to think about using JSON to send them to the servlet using AJAX . It's the friendliest way.

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;
}

This simple function transforms a table format JSON . You can edit it to avoid x columns. Then you send that JSON by 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

In the servlet you get the JSON and with the help of the official library for Java we can map that JSON to Java objects.

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'));

You can see the API here .

To make a classic submit, you can use hidden text boxes so that when sending the form, send these. For that you must create a hidden text box each time you add a new row.

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

And when sending the form, in the servlet you get the values. For example:

String[] productos = request.getParameterValues('producto');

You can use a function that collects the values of each element of the table and send it to an 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);
    }