Cuando declaras que onclick
gatilla un cierto handler, a menos que le pases un argumento éste no tiene cómo saber a cuál fila te refieres. Mira por ejemplo la diferencia entre invocar al handler pasándole el elemento mismo vs nada.
function ejecutar_sin_argumento() {
alert(this.id)
}
function ejecutar_con_argumento(element) {
alert(element.id)
}
<button onclick="ejecutar_sin_argumento()" id="el_boton">Pínchame y te dijo mi Id</button>
<button onclick="ejecutar_con_argumento(this)" id="el_boton2">Yo sí te digo mi Id</button>
Lo que una función entiende por this
es abstracto en este punto. Cuando usas el clásico
jQuery('#elemento').on('click',function() {
// como function tiene scope propio,
// `this` es el elemento
})
El scope es distinto a cuando usas
jQuery('#elemento').on('click',() => {
// no tiene scope propio, así que
// `this` apunta al scope superior
})
En tu caso, no tiene caso esperar que el scope se transfiera mágicamente.
Y cómo hace jQuery para adivinar el this
?
Pensemos en un listener declarado como
jQuery(...).on('click', function() {
alert(this.id);
});
La función ahí parece no tener parámetros, pero en javascript (así como en PHP y otros lenguajes) nada impide llamarla con argumentos extra y cuando son funciones clásicas (no arrow) puedes acceder a los argumentos recibidos, en el objeto arguments
.
jQuery se vale de eso para identificar qué evento invocó el handler, y si sabe el evento entonces también sabe el elemento, pues viene en la propiedad target
del evento. Es como si hiciera:
const EventHandler = function() {
let evento = arguments[0];
alert(evento.target.id);
}
Veamos la comparación entre el handler con "función clásica" que adivina cosas misteriosamente, vs un intento de hacer lo mismo en una arrow function, vs la manera correcta para no perder de vista qué es lo que viaja de un handler a otro...
$('#el_boton_A').on('click', function() {
alert('Puedo inferir el ID porque tengo scope propio. ID=' + this.id);
});
$('#el_boton_B').on('click', () => {
alert(window === this ? 'No tengo scope. `this` es igual a `window`' : this.id);
});
$('#el_boton_C').on('click', (event) => {
alert('no tengo scope pero recibí el evento. ID= ' + event.target.id);
});
button {
padding: 5px;
background: white;
border-radius: 3px;
border: 1px solid #369;
width: 250px;
display: block;
margin: 0.5em;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="color:#036" id="el_boton_A">`function()` clásica, infiere el ID</button>
<button style="color:#900" id="el_boton_B">Arrow, no tiene scope propio ni `this` </button>
<button style="color:#373" id="el_boton_C">Esta arrow recibe el evento explícito</button>
Entonces, volviendo a tu tabla dinámica
si vas a usar onclick
, preocúpate de pasarle algún argumento. Si vas a declarar un listener sobre las filas, utiliza el argumento que te llegará aunque no lo hayas pedido. Ese argumento contiene al target que recibió el click.
function llamar_datos1() {
var id = $(this).closest('tr').find('#nombre_servicio').text();
alert(id);
}
document.querySelector('#modificar2').addEventListener('click', (event) => {
alert('event.target.id: ' + event.target.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<table class="table table-striped table-class" id="table-id" name="servicios_tabla">
<thead>
<tr>
<th>ID</th>
<th>Nombre del servicio</th>
<th>Categoria del servicio</th>
<th>Estado</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<tr>
<td id='id_servicio'>1</td>
<td id='nombre_servicio' class='nr'>Un servicio</td>
<td>Plomería</td>
<td>Pendiente</td>
<td><button onclick='llamar_datos1()' class='btn btn-primary' id='modificar' name='modificar' data-toggle='modal' data-target='#GSCCModal'>Modificar</button></td>
</tr>
<tr>
<td id='id_servicio'>2</td>
<td id='nombre_servicio' class='nr'>Otro servicio</td>
<td>Carpintería</td>
<td>Aprobado</td>
<td><button class='btn btn-primary' id='modificar2' name='modificar' data-toggle='modal' data-target='#GSCCModal'>Modificar</button></td>
</tr>
</tbody>
</table>
Cuando hayas resuelto esta parte, te vas a encontrar tarde o temprano con un problema ocasionado porque todas tus filas tienen el mismo ID en la primera y segunda columnas. Eso puede pasar desapercibido en tanto uses una búsqueda relativa como closest()
pero no es correcto.