Tengo una tabla la cuál es generada desde la base de datos con PHP
por lo que no le asigno un id
, la idea es mostrar los registros de clientes para asignarles una dirección (con otro formulario pero necesito el id del cliente), tengo funcionalidad pero recargando la pagina lo que quiero es hacerlo con JavaScript
y que simplemente cuando le de en un enlace que hay en la tabla (en la fila de cada cliente) que los muestre en los campos del formularios sin recargar la pagina, pero tengo dos días de estar aprendiéndolo apenas no sé bien como implementarlo.
Esta es la tabla del html ya generada:
<table class="table table-bordered" id="tblClientes">
<thead>
<tr>
<th>ID Cliente</th>
<th>Cliente</th>
<th>Documento</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Cliente1 apellido1</td>
<td>5467915414</td>
<td>
<center>
<a onclick="alertar(this)" class="waves-effect waves-dark" href="#" aria-expanded="false">
<i class="fa fa-edit" data-toggle="tooltip" title="" data-original-title="Seleccionar"></i>
<span class="hide-menu"></span>
</a>
</center>
</td>
</tr>
<tr>
<td>2</td>
<td>Cliente2 apellido2</td>
<td>5467915414</td>
<td>
<center>
<a onclick="alertar(this)" class="waves-effect waves-dark" href="#" aria-expanded="false">
<i class="fa fa-edit" data-toggle="tooltip" title="" data-original-title="Seleccionar"></i>
<span class="hide-menu"></span>
</a>
</center>
</td>
</tr>
</tbody>
</table>
Y aqui enviaría los datos que seleccione de la tabla (parte del form)
<div class="column">
<label for="cliente">Cliente:</label>
<input readonly style="width:88%;" type="text" class="form-control" id="cliente" name="cliente">
</div>
<div class="column">
<label for="doc">Identificación:</label>
<input readonly type="text" class="form-control" id="doc" name="doc">
</div>
Esto es el javascript
function alertar(elemento){
try{
//trato de obtener el padre del a que seria el que llama a la funcion
//pero me lo tira como undefined y entonces no puedo acceder al padre de este
//del center para llegar hasta el <tr> para leer la fila
var centerEl = elemento.parentNode;
alert(centerEl.constructor);
}catch(err){
alert(err.message);
}
alert("Hola de prueba a la funcion");
}
Lo que trato de hacer es llegar hasta el <tr>
con el elemento <a>
que ejecuta la función ya que no hay id (como la tabla viene de la base), tengo una base de como leer la fila de la tabla el problema sería que no llego a obtener la fila para hacerlo ya que me dice que está undefined
.