Take all data from an HTML table and insert it into the database

Question

I have an editable table in html, when clicking save, I need to take all the data of the table, send by ajax to the page that makes the INSERT of all the lines in the database.

My doubt would be:

1. How to grab all rows from the table and send via ajax.
2. How to insert all these lines, since they can be 5, 6 or more lines. Never a fixed value.

Structure of the HTML table

<tbody class="list_modificacao"><tr>
    <th scope="row">JOAO</th>
        <td class="text-center option_divisao bg-dark luz">-</td>
        <td class="text-center option_divisao bg-dark agua">-</td>
        <td class="text-center option_divisao bg-dark agua_campo">-</td>
    </tr><tr>
        <th scope="row">MARIA</th>
        <td class="text-center option_divisao bg-dark luz">-</td>
        <td class="text-center option_divisao bg-dark agua">-</td>
        <td class="text-center option_divisao bg-dark agua_campo">-</td>
    </tr><tr>
        <th scope="row">JOSE</th>
        <td class="text-center option_divisao bg-dark luz">-</td>
        <td class="text-center option_divisao bg-dark agua">-</td>
        <td class="text-center option_divisao bg-dark agua_campo">-</td>
    </tr>
</tbody>

BD structure

+------+-----+------+------------+
| NOME | LUZ | AGUA | AGUA_CAMPO |
+------+-----+------+------------+

Answer 1

A simple way with Jquery:

On the front end, you loop and assemble a two-dimensional array to send back-end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tbody class="list_modificacao"><tr>
    <th scope="row">JOAO</th>
        <td class="text-center option_divisao bg-dark luz">-</td>
        <td class="text-center option_divisao bg-dark agua">-</td>
        <td class="text-center option_divisao bg-dark agua_campo">-</td>
    </tr><tr>
        <th scope="row">MARIA</th>
        <td class="text-center option_divisao bg-dark luz">a</td>
        <td class="text-center option_divisao bg-dark agua">b</td>
        <td class="text-center option_divisao bg-dark agua_campo">c</td>
    </tr><tr>
        <th scope="row">JOSE</th>
        <td class="text-center option_divisao bg-dark luz">-</td>
        <td class="text-center option_divisao bg-dark agua">-</td>
        <td class="text-center option_divisao bg-dark agua_campo">-</td>
    </tr>
</tbody></table>

In the back end you do more or less the same thing to create the SQL script

<script>
//Todas th, vai servir para criar array dentro do array
var th = $('tbody th');
//Todas td
var td = $('tbody td');
//Array final que vai ser enviado por AJAX
var array = [];

//Monta o array
for(var i = 0; i < th.length; i++) {
  array[i] = [th[i].innerText, td[0].innerText, td[1].innerText, td[2].innerText];
}

//Chama o AJAX
$.ajax({
  url: 'teste.php',
  type: 'post',
  data: {array: array}
})
.done(function(result) {
    console.log(result);
});
</script>
<?php
//Armazena a variável que veio por post
$array = $_POST["array"];

//Monta a variável com o script SQL
$sql = "INSERT INTO tabela() ";

for($i = 0; $i < count($array); $i++) {
    $sql .= "values(".$array[$i][0].", ".$array[$i][1].", ".$array[$i][2].", ".$array[$i][3]."),";
}

//Retira a última vírgula
$sql = trim($sql, ",");

//Mostra o SQL, no caso aqui você o executaria (mysqli_ ou PDO)
echo $sql;
?>