llenar input con informacion de una tabla

[brayanp0721]

buenas, estoy un poco confunso en cuanto a que no se como hacer un codigo que solucione mi problema

tengo una tabla con informacion de usuarios, y en la ultima columna para cada cliente hay tres botones (ver, editar, eliminar) cada boton me abre un modals de bootstrap el cual tiene un formulario de puros input, necesito que, si doy clic en el boton ver de una fila determinada me cargue en los input la informacion de datos personales de ese usuario tales como cedula, nombre, apellidos, telefono, correo....

No se como hago para saber en que fila es la que le estoy dando clic y saber que informacion de la tabla es la que debo mandar a los input... ayuda por favor...

[Alexis88]

Para casos como este, tienes dos opciones: O tomas a los datos que se muestran actualmente en las celdas de la fila del botón pulsado o solo envías el código identificador de dicha fila y en la ventana modal realizas una búsqueda en la base de datos la cual te devolverá los datos que le correspondan.

La primera sería más o menos así:

Código HTML:

<table>
    <thead>
        <tr>
            <td>Código</td>
            <td>Nombre</td>
            <td>Apellido</td>
            <td>Edad</td>
            <td>Opciones</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0031405</td>
            <td>Juan</td>
            <td>Padilla</td>
            <td>48</td>
            <td>
                <button onclick = "abrirVentanaModal(this.parentNode.parentNode)">Ver</button>
                <button onclick = "Tu función para editar">Editar</button>
                <button onclick = "Tu función para eliminar">Eliminar</button>
            </td>
        </tr>
    </tbody>
</table>
 

Código Javascript:

function abrirVentanaModal(fila){
    var codigo = fila.childNodes[1].innerHTML,
        nombre = fila.childNodes[3].innerHTML,
        apellido = fila.childNodes[5].innerHTML,
        edad = fila.childNodes[7].innerHTML;
 
    //Se mostrará en consola: 0031405 Juan Padilla 48
    console.log(codigo, nombre, apellido, edad);
 
    /* Acá abrirás la ventana modal y utilizarás los datos almacenados en las variables */
}
 

Mediante la propiedad parentNode, obtengo al elemento que contiene al que se indique, que en este caso es el botón representado por la palabra reservada this. Inicialmente, tomo a la celda pues es el elemento contenedor del botón, pero como deseo obtener los valores de las otras celdas de la fila, obtengo al elemento que contiene a la celda, que es la fila, y así obtengo a los nodos hijos de esta que son las celdas, usando la propiedad childNodes. Al igual que en los arrays, puedo acceder a sus elementos mediante índices, los cuales empiezan con el cero hasta la cantidad total de elementos menos uno.

Como hay saltos de línea entre cada celda, se generan nodos de texto que no vemos pues no poseen contenido, pero que cuentan como nodos hijos de la fila, entonces, la lista de nodos hijos de la fila queda así:

Código HTML:

text
td       --->   Celda del código
text
td       --->   Celda del nombre
text
td       --->   Celda del apellido
text
td       --->   Celda de la edad
text
td       --->   Celda de los botones
text
 

Por los tanto, los índices de las celdas son 1, 3, 5, 7 y 9, por lo que con los cuatro primeros podré acceder a las celdas con la información, la cual guardo en variables que puedes usar para llenar los campos de la ventana modal que mencionas.

La otra forma es realizar una búsqueda en la base de datos, algo que deduzco que sabes hacer para haber llegado hasta este punto.

Trata de adaptar esto a lo que necesitas.

Saludos