Mi problema es que cuando hago clic en la etiqueta TR, muestra un color, y cuando vuelvo a hacer clic, el color de fondo desaparece, y hasta ahora todo bien. Pero cuando hago clic de nuevo, el color no muestra dónde está el problema.
function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } $('.tr').click(function() { $('.tr').css("background-color", ""); $(this).css({ "background-color": getRandomColor() }); $(this).click(function() { $(this).css("background-color", "initial"); }); }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="css/style.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <table class="table table-bordered table-hover w-99"> <tbody> <tr class="tr"> <td>654</td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> </body> </html>Por lo general, anidar eventos de clic es una mala idea, ya que a menudo no funcionan como se esperaba.
En este caso,
$(this).click(function() { $(this).css("background-color", "initial"); }); no está reemplazando el $(".tr").click inicial, por lo que ambos se ejecutan cada vez después del primer clic.
Una opción sería usar .off("click") y agregar el otro controlador, pero es un poco complicado.
Normalmente, sugeriría usar toggleClass para configurar su fondo, pero como es un color aleatorio, esa no es una opción.
Sin embargo, aún puede agregar una clase (o usar .data(.., ..) ) para indicar si necesita restablecerse:
function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } $('.tr').click(function() { // clear rows $('.tr') .css("background-color", "") .not(this) .removeClass("random"); if (!$(this).hasClass("random")) { $(this).css({ "background-color": getRandomColor() }) .addClass("random"); } else { $('.tr').removeClass("random"); // no need to reset $(this).background-color as reset above } }); .random { /* nothing here */ } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <table class="table table-bordered table-hover w-99"> <tbody> <tr class="tr"> <td>987</td> </tr> <tr class="tr"> <td>654</td> </tr> <tr class="tr"> <td>321</td> </tr> </tbody> </table>simplemente eliminó un poco de su código y agregó el css user-select: none; para evitar la selección de texto después de varios clics.
function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } $('.tr').click(function() { console.log(getRandomColor()) $('.tr').css("background-color", getRandomColor()); }) td { user-select: none; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="css/style.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <table class="table table-bordered table-hover w-99"> <tbody> <tr class="tr"> <td>654</td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> </body> </html>sugerencia: tenga cuidado de cambiar el color de la fuente a uno blanco, cuando el fondo es demasiado oscuro. Tal vez haya un método jQuery para detectar el contraste.
Puede usar un hasColor como valor booleano para rastrear el estado.
function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } $('.tr').click(function() { var hasColor = $(this).attr('hasColor'); if (!hasColor) { var hasColor = $(this).attr('hasColor', true); $(this).css({ "background-color": getRandomColor() }); } else { var hasColor = $(this).attr('hasColor', ''); $(this).css("background-color", ""); } }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="css/style.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <table class="table table-bordered table-hover w-99"> <tbody> <tr class="tr"> <td>654</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="tr"> <td>654</td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> </body> </html>