convertir cadena de texto en inputs de una tabla que muestra varios registros de BD

[Alexis88]

En lugar de imprimir directamente los datos, puedes mostrarlos en cajas de texto y, a estas últimas, aplicarles la propiedad readOnly para que no puedan ser modificados.

Código PHP:

<td>
    <input 
        type = "text" 
        value = "<?php echo $row['strNombreImagen']; ?>" 
        onclick = "modificar(this)" 
        onkeypress = "guardar(event, this)" 
        readOnly />
</td>
<td>
    <input 
        type = "text" 
        value = "<?php echo $row['strTituloImagen']; ?>" 
        onclick = "modificar(this)" 
        onkeypress = "guardar(event, this)" 
        readOnly />
</td>
 

Como verás, además del atributo readOnly, les asigné dos funciones que se ejecutarán en dos casos en particular. La primera, para cuando se le de un clic a la caja de texto (modificar()) y la segunda, para cuando se pulse una tecla mientras la caja de texto tenga el enfoque (guardar()). A la primera, le envío a la propia caja de texto como parámetro, mientras que a la segunda, le envío el objeto del evento y a la caja de texto.

Las funciones serían así:

Código Javascript:

function modificar(caja){
    if (caja.readOnly){
        caja.readOnly = false;
    }
    else{
        caja.readOnly = true;
    }
}
 
function guardar(evento, caja){
    var ajax = new XMLHttpRequest();
 
    if (evento.keyCode == 13){
        ajax.open("GET", "tupagina.php?valor=" + caja.value, true);
        ajax.onreadystatechange = function(){
            if (ajax.readyState == 4 && ajax.status == 200){
                alert(ajax.responseText);
            }
        };
        ajax.send();
        caja.readOnly = true;
    }
}
 

En la primera función (modificar()), recibo a la caja de texto y evalúo el estado de su atributo readOnly; si este es true (colocando la expresión de esa manera en la condición, se evalúa si es true o false), le asigno false a dicho atributo para que se pueda escribir en la caja de texto, caso contrario, le vuelvo a asignar true.

En la segunda función (guardar()), recibo al objeto del evento y a la caja de texto. Primero, declaro a la variable ajax y le asigno un objeto XMLHttpRequest para poder realizar una petición asíncrona (Ajax), luego, evalúo el código interno de la tecla pulsada; si este es igual a 13, que es el código que corresponde a la tecla ENTER, envío el valor de la caja de texto hacia la página que deberá actualizar el dato en la base de datos.

Esta parte sería más o menos así:

Código PHP:

$valor = $_GET['valor'];
if (mysqli_query($conexion, "UPDATE tabla SET campo = '$valor' WHERE {aquí va tu condición}"){
    echo 'El dato ha sido actualizado';
}
else{
    echo 'No se pudo actualizar el dato';
}
 

Si te fijas, ya sea cuando se logre o no actualizar el dato en la base de datos, se imprime un mensaje; dicho mensaje será lo que se devolverá a la petición asíncrona y que recibirás en ajax.responseText, el cual muestro mediante un mensaje de alerta.

Finalmente, vuelvo a asignar true al atributo readOnly de la caja de texto, para que nuevamente solo se muestre el dato y no se lo pueda modificar hasta que se le vuelva a dar un clic a la caja de texto.

Saludos