How do I send data from a table html in a form post?

Question

I have a form that contains a list within a tag table, how do I upload the data from this table to the table itself POST form? Without using hidden inputs. If possible in pure Javascript, but if no way could be in Jquery.

Answer 1

This gives an idea of how it works. What I did was take advantage of the attributes data and I inserted it in the buttons to then search with javascript:

var editBtns = document.querySelectorAll('.edit');
for(var i=0;i<editBtns.length;i++){
	editBtns[i].addEventListener('click', function() {
    var toPost = {};
    for(var key in this.dataset) {
        toPost[key] = this.dataset[key];
    }
    var queryString = '';
    for(key in toPost) {
        queryString += key + '=' + toPost[key] + '&';
    }
    queryString = queryString.slice(0, queryString.length - 1);
    console.log(queryString);
    enviar(queryString)
  });
}

function enviar(params) {
	var http = new XMLHttpRequest();
  var url = "url.php";
  
  http.open("POST", url, true);
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http.onreadystatechange = function() {
      if(http.readyState == 4 && http.status == 200) {
          alert(http.responseText);
      }
      else if (http.status == 404) {
      	alert('not found');
      }
      else if(http.status >= 500) {
      	alert('brrh');
      }
  }
  http.send(params);
}

<table>
<tr>
  <td>
    nome1
  </td>
  <td>
    email1
  </td>
  <td>
    endereço1
  </td>
  <td><button class="edit" data-endereco="endereco1" data-email="email1" data-nome="nome1" class="btn btn-xs btn-primary">Enviar</button>
</tr>
<tr>
 <td>
    nome2
  </td>
  <td>
    email2
  </td>
  <td>
    endereço2
  </td>
  <td><button class="edit" data-endereco="endereco2" data-email="email2" data-nome="nome2">Enviar</button>
</tr>
<tr>
  <td>
    nome3
  </td>
  <td>
    email3
  </td>
  <td>
    endereço3
  </td>
  <td><button class="edit" data-endereco="endereco3" data-email="email3" data-nome="nome3" class="btn btn-xs btn-primary">Enviar</button>
  </td>
</tr>

</table>
<br>

EXAMPLE in jsfiddle

Answer 2

See by here in the console, in jsfiddle. This way you will have the whole table in a query string (click to send) ready to ship:

NOTE that you must adjust the Keys (data-field) of each one, not to be repeated

var table = document.getElementById("mytab1");
var toPost = [];
var toPush = {};
for (var i = 0, row; row = table.rows[i]; i++) {
   toPush = {};
   for (var j = 0, col; col = row.cells[j]; j++) {
     toPush[row.cells[j].dataset.campo] = row.cells[j].innerHTML.trim();
   }
   toPost.push(toPush)
}
console.log(toPost);

var send = document.getElementById('enviar');
send.addEventListener('click', function() {
   queryString = '';
   for(var i in toPost) {
      for(var key in toPost[i])
      queryString += key + '=' + toPost[i][key] + '&';
  }
  queryString = queryString.slice(0, queryString.length - 1);
  console.log(queryString);
 enviar(queryString);
});

function enviar(toPost) {
	var http = new XMLHttpRequest();
  var url = "url.php";
  
  http.open("POST", url, true);
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http.onreadystatechange = function() {
      if(http.readyState == 4 && http.status == 200) {
          alert(http.responseText);
      }
      else if (http.status == 404) {
      	alert('not found');
      }
      else if(http.status >= 500) {
      	alert('brrh');
      }
  }
  http.send(toPost);
}

<table id="mytab1">
<tr>
  <td data-campo="nome">
    nome1
  </td>
  <td data-campo="email">
    email1
  </td>
  <td data-campo="endereco">
    endereço1
  </td>
</tr>
<tr>
 <td data-campo="nome">
    nome2
  </td>
  <td data-campo="email">
    email2
  </td>
  <td data-campo="endereco">
    endereço2
  </td>
</tr>
<tr>
  <td data-campo="nome">
    nome3
  </td>
  <td data-campo="email">
    email3
  </td>
  <td data-campo="endereco">
    endereço3
  </td>
</tr>

</table>

<button id="enviar">
enviar
</button>

NOTE that should adjust the Keys (data-campo) not to be repeated

EXAMPLE in jsfiddle