Edit data from a sql table in a table in html

I only have one question. But first, thanks for the help in the previous question.

Is there a way to edit the sql data in an html table? I already managed to make them appear, what I want to do now is that they are editable and the changes are visible in the database.

My code:

<table id="tablaprofesores" name="tablaprofesores">
<thead>
        <tr>
            <td>Id</td>
            <td>Nombre del profesor</td>
            <td>Materia que da</td>
            <td>Fecha de clase</td>
            <td>Hora de inicio</td>
            <td>Hora de finzalizacion</td>
            <td>Numero de computadores</td>
            <td>Comandos</td>
        </tr>
    </thead>
    <tbody>
    <?php
        $db = mysqli_connect('localhost', 'root', '', 'prueba');
        $query = "SELECT * FROM reservacdt LIMIT 10";
        $result = mysqli_query($db, $query);
        while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)) {
        ?>
            <tr>
                <td><?php echo $row['id']?></td>
                <td><?php echo $row['nombre']?></td>
                <td><?php echo $row['materia']?></td>
                <td><?php echo $row['fecha']?></td>
                <td><?php echo $row['fechaemp']?></td>
                <td><?php echo $row['fechater']?></td>
                <td><?php echo $row['numero']?></td>
                <td><input type="button" id="cambiar" name="cambiar" value="Cambiar datos"></input></td>
            </tr>
        <?php
        }
        ?>
    </tbody>
</table>

Update:

I decided to do this method that they taught me once, for some reason it does not work correctly.

<table id="tablaprofesores" name="tablaprofesores">
    <thead>
        <tr>
            <td>Id</td>
            <td>Nombre del profesor</td>
            <td>Materia que da</td>
            <td>Fecha de clase</td>
            <td>Hora de inicio</td>
            <td>Hora de finzalizacion</td>
            <td>Numero de computadores</td>
            <td>Comandos</td>
        </tr>
    </thead>
    <tbody>
    <?php //Se crea la conexion a la base de datos
        $db = mysqli_connect('localhost', 'root', '', 'prueba');
        $query = "SELECT * FROM reservadiseno LIMIT 10";
        $result = mysqli_query($db, $query);
        while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)) {
        ?>
            <tr>
                <td><?php echo $row['id']?></td>
                <td id="nombre_row"><?php echo $row['nombre']?></td>
                <td id="materia_row"><?php echo $row['materia']?></td>
                <td id="fecha_row"><?php echo $row['fecha']?></td>
                <td id="fechaemp_row"><?php echo $row['fechaemp']?></td>
                <td id="fechater_row"><?php echo $row['fechater']?></td>
                <td id="numero_row"><?php echo $row['numero']?></td>
                <td><input type="button" id="cambiar" name="cambiar" value="Cambiar datos" onclick="cambiar('.$row.')"></input></td>
                <td><input type="button" id="salvar" name="salvar" value="Salvar datos" onclick="salvar('.$row.')"></input></td>
            </tr>
        <?php
        }

        ?>
    </tbody>
    </table>

<script> <!-- Scripts a usar -->

function cargartabla(){ //Esto carga la tabla cuando se edita
for(i=0; i<document.getElementsByName("salvar").length; i++){
 document.getElementsByName("salvar").item(i).hidden=true;
}
}

function cambiar(no)
{
 document.getElementsByName("cambiar").item(no).hidden=true;
 document.getElementsByName("salvar").item(no).hidden=false;

var job=document.getElementById("nombre_row"+no);
var email=document.getElementById("materia_row"+no);
var user=document.getElementById("fecha_row"+no);
var estado=document.getElementById("fechaemp_row"+no);
var estado=document.getElementById("fechater_row"+no);
var estado=document.getElementById("numero_row"+no);

var nombre_data=nombre.innerHTML;
var materia_data=materia.innerHTML;
var fecha_data=fecha.innerHTML;
var fechaemp_data=fechaemp.innerHTML;
var fechaeter_data=fechater.innerHTML;
var numero_data=numero.innerHTML;

nombre.innerHTML="<input type='text' id='nombre_text"+no+"'value='"+nombre_data+"'>";
materia.innerHTML="<input type='text' id='materia_text"+no+"' value='"+materia_data+"'>";
fecha.innerHTML="<input type='date' id='fecha_text"+no+"' value='"+fecha_data+"'>";
fechaemp.innerHTML="<input type='time' id='fechaemp_text"+no+"' value='"+fechaemp_data+"'>";
fechater.innerHTML="<input type='time' id='fechater_text"+no+"' value='"+fechater_data+"'>";
numero.innerHTML="<input type='number' id='numero_text"+no+"' value='"+numero_data+"'>";
document.getElementsByName("salvar").item(i).hidden=false;
}

function salvar(no)
{
var nombre_val=document.getElementById("nombre_text"+no).value;
var materia_val=document.getElementById("materia_text"+no).value;
var fecha_val=document.getElementById("fecha_text"+no).value;
var fechaemp_val=document.getElementById("fechaemp_text"+no).value;
var fechater_val=document.getElementById("fechater_text"+no).value;
var numero_val=document.getElementById("numero_text"+no).value;

document.getElementById("nombre_row"+no).innerHTML=nombre_val;
document.getElementById("materia_row"+no).innerHTML=materia_val;
document.getElementById("fecha_row"+no).innerHTML=fecha_val;
document.getElementById("fechaemp_row"+no).innerHTML=fechaemp_val;
document.getElementById("fechater_row"+no).innerHTML=fechater_val;
document.getElementById("numero_row"+no).innerHTML=numero_val;

document.getElementsByName("cambiar").item(no).hidden=false;
document.getElementsByName("salvar").item(no).hidden=true;
}

</script>