Esto podría confundir, pero es una pregunta seria.
Estoy obteniendo filas de tablas de un bucle usando php y estoy mostrando esas tablas dentro de una etiqueta de tabla usando ajax.
Aquí para cada fila hay una identificación llamada productTableRow .
Entonces, lo que quiero hacer es, en esta tabla, cuando hago clic en una fila específica, quiero cambiar el color de fondo de la fila en la que se hizo clic. Solo esa fila y tomar el valor del atributo de la fila en la que se hizo clic llamado ID de producto y mostrarlo en otro entrada oculta
$(document).on('click', function(e){ if($(e.target).is('#productTableRow')){ var productId = $(e.target).attr('productId'); if(productId == productId){ $(e.target).css('background-color','#128C7E'); } else { $('.trProductTable').css('background-color', 'transparent'); } }});
Este es mi código php que genera las filas de la tabla,
foreach ($products as $product) { $responseData .= "<tr id='productTableRow' productId='" . $product->id . "'>"; $responseData .= "<td>" . $product->id . "</td>"; $responseData .= "<td>" . $product->product_name . "</td>"; $responseData .= "<td>" . $product->product_barcode . "</td>"; if ($product->group_id == 0) { $responseData .= "<td>None</td>"; } else { $responseData .= "<td>" . $product->group_name . "</td>"; } $responseData .= "<td>" . $product->product_cost . "</td>"; $responseData .= "<td>" . $product->product_selling . "</td>"; if ($product->product_type == 0) { $responseData .= "<td>Liquid</td>"; } else if ($product->product_type == 1) { $responseData .= "<td>Weight</td>"; } else if ($product->product_type == 2) { $responseData .= "<td>Quantity</td>"; } $responseData .= "<td>" . $product->created_at . "</td>";Intenté este código pero no funciona, realmente aprecio su ayuda.
Después de cambiar la identificación a una clase, intentaría esto
$('tr.productTableRow').click(function(){ var productId = $(this).attr('productId'); if(productId === productId){ // Always true $(this).css('background-color','#128C7E'); } else { // Do something when false ??? } }); Nota de edición: este código debe ejecutarse después de agregar la tabla al html, si necesita ejecutarlo antes, coloque el código dentro de $(document).ready(function(){/*code */ });
Editar: respuesta basada en los comentarios.
$(document).on('click', '.productTableRow', function(){ if(oldObject) { $(oldObject).css('background-color', 'transparent'); } var productId = $(this).attr('productId'); if(productId === productId){ // Always true $(this).css('background-color','#128C7E'); } oldObject = this; });En primer lugar, la identificación debe ser específica de un elemento. Jquery está configurado así. Luego puede usar $(this).parent('tr') Para obtener la fila principal en el evento de clic que puede ser para toda la clase.
llegué a mi propia respuesta,
$(document).on('click', '.groups-product-sidebar', (e)=>{ //Getting the clicked group attributes var groupId = $(e.target).attr('groupId'); $('.groups-product-sidebar').parent().css('background-color','transparent'); $(e.target).parent().css('background-color','#128C7E'); });