Fondo
Estoy creando dinámicamente una tabla con php. Dentro de uno de los <td> estoy agregando una js function . Cuando un usuario hace clic en ese campo, se ejecuta una función AJAX y elimina la fila de la tabla de la base de datos.
Estoy tratando de descubrir cómo apuntar a esa fila específica para actualizar la vista para mostrar que la fila ha sido eliminada. Iba a eliminar toda la fila o cambiar el color a rojo para mostrarle al usuario que la fila se eliminó de la base de datos.
Pregunta
Cuando un usuario hace clic en un enlace dentro de un <td> de una tabla de creación dinámica, ¿cómo puedo apuntar a toda la fila para realizar una acción de manipulación de DOM en la fila en la que se hizo clic?
Ejemplo de tabla de códigos
Observe la onClick function en la parte inferior. Esa función se ejecuta y cuando la función AJAX tiene éxito, quiero eliminar la fila o cambiar su color.
<tr> <th>Customer ID</th> <th>First Name</th> <th>Last Name</th> <th>Phone</th> <th>Email</th> <th>Download Letter</th> <th>Template ID</th> </tr> </thead> <tbody> <tr> <td><?php echo $value->customer_id; ?></td> <td><?php echo $value->fname; ?></td> <td><?php echo $value->lname; ?></td> <td><?php echo $value->phone; ?></td> <td><?php echo $value->email; ?></td> <td><a href="<?php echo $value->pdf_file_path; ?>"><?php echo $value->template_heading; ?></a></td> <td><?php echo $value->temp_id; ?></td> <td> <a class="blue-text"><i class="options fa fa-user"></i></a> <a class="green-text"><i class="options fa fa-pencil"></i></a> <a class="red-text" href="#" onClick="removePDF(user_id, customer_id, temp_id)"><i class="options fa fa-times"></i></a> </td> </tr>Función AJAX
function removePDF(user_id, customer_id, temp_id){ return $.ajax({ url: 'https://www.example.com/script.php', type: 'GET', cache: false, data: { user_email: user_email, user_id: user_id, customer_id: customer_id, temp_id: temp_id, }, success: function(data){ console.log(data); } }); }Como HTML se genera a través de un script, puede configurar un contador y agregar una ID única a cada etiqueta <tr> , y luego pasar ese contador a través del método JS removePDF() .
Ejemplo de código HTML sería
<tr id="unique_num_<?= $unique_ctr; ?>"> <!-- ... --> <!-- ... --> <td> <a class="blue-text"><i class="options fa fa-user"></i></a> <a class="green-text"><i class="options fa fa-pencil"></i></a> <a class="red-text" href="javascript:void(0);" onClick="removePDF(user_id, customer_id, temp_id, <?= $unique_ctr; ?>)"><i class="options fa fa-times"></i></a> </td> </tr>El código JS de muestra será
function removePDF(user_id, customer_id, temp_id, tr_num) { //... //... success: function (data) { console.log(data); $('#unique_num_' + tr_num).remove(); //or $('#unique_num_' + tr_num).addClass('my_class'); //... } //... //... }¡Espero que esto ayude!