We must first clarify if what you need is that the data be shown in the table below or if you need the data to be shown in the table below and stored in the base of data .
If it is the first, you can make a script that takes the values of the form, and thereby dynamically create a new row in the table below.
document.getElementById('botonOk').addEventListener('click', agregarFila);
(function(){
// Obtener todos los elementos boton-eliminar
// que ya están cargados
let botones = document.querySelectorAll('.boton-eliminar');
// Agregar listener a todos los botones
botones.forEach(function(e){
e.addEventListener('click', eliminarFila);
});
})();
function agregarFila(event){
event.preventDefault();
let campo1 = document.createElement('td');
let campo2 = document.createElement('td');
let campo3 = document.createElement('td');
// Crear campo botón con un botón adentro
let campoEliminar = document.createElement('td');
let botonEliminar = document.createElement('button');
botonEliminar.type = 'button';
botonEliminar.innerText = 'Eliminar';
botonEliminar.className='boton-eliminar';
// Agregar función listener al botón
botonEliminar.addEventListener('click', eliminarFila);
campo1.innerText = document.getElementById('campo1').value;
campo2.innerText = document.getElementById('campo2').value;
campo3.innerText = document.getElementById('campo3').value;
campoEliminar.appendChild(botonEliminar);
let nuevaFila = document.createElement('tr');
nuevaFila.appendChild(campo1);
nuevaFila.appendChild(campo2);
nuevaFila.appendChild(campo3);
nuevaFila.appendChild(campoEliminar);
document.getElementById('tablaDestino').querySelector('tbody').appendChild(nuevaFila);
}
function eliminarFila(event){
// Obtener nodo fila que contiene el botón
let fila = this.parentElement.parentElement;
fila.remove();
}
<form action="#">
<input type="text" name="campo1" id="campo1" />
<input type="text" name="campo2" id="campo2" />
<input type="text" name="campo3" id="campo3" />
<button type="button" id="botonOk">Agregar</button>
</form>
<table id="tablaDestino">
<thead>
<th>Campo 1</th>
<th>Campo 2</th>
<th>Campo 3</th>
<th>Eliminar</th>
</thead>
<tbody>
<tr>
<td>Precargado 1</td>
<td>123456</td>
<td>123456</td>
<td><button type="button" class="boton-eliminar">Eliminar</button>
</tr>
</tbody>
</table>
If you need to save it in the database, you can use the same method to display the data, and at the end of the function agregarFila make an asynchronous call (AJAX) to insert the record. It should be mentioned that the validations necessary to insert the data (data integrity, non-empty fields, etc.) are not considered in the snippet.
