Changing the color of a clicked table row using jQuery

Question

I need your help   How can I  using jQuery   Change the background color of the selected row in my table  for this example  let s use the the css class  highlighted   and if the same row is clicked on again  change it back to its default color  white  select the css class  nonhighlighted    lt  DOCTYPE html gt    lt html gt    lt head gt    lt style type  text css  gt    highlighted       background  red     nonhighlighted       background  white     lt  style gt    lt  head gt    lt body gt    lt table id  data  border  1  cellspacing  1  width  500  id  table1  gt       lt tr gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt           lt td gt  amp nbsp  lt  td gt       lt  tr gt   lt  table gt    lt  body gt    lt  html gt

User · Answer

highlight                background-color  papayawhip             table tr   click function              table tr   removeClass  highlight                  this  addClass  highlight

User · Answer

highlight   background-color  red      If you want multiple selections      data tr   click function           this  toggleClass  highlight          If you want only 1 row in the table to be selected at a time      data tr   click function         var selected     this  hasClass  highlight            data tr   removeClass  highlight        if  selected                this  addClass  highlight          Also note your TABLE tag has 2 ID attributes  you can t do that

User · Answer

jQuery         data td   toggle function          this  css  background-color   blue     function          this  css  background-color   ur default color

User · Answer

in your css    selected      background   F00      in the jquery       data tr   click function         this  toggleClass  selected          Basically you create a class and adds removes it from the selected row   Btw you could have shown more effort  there s no css or jquery js at all in your code xD

User · Answer

To change color of a cell     document  on  click     table tbody td   function  event          var selected     this  hasClass  obstacle            table tbody td   removeClass  obstacle        if   selected            this  addClass  obstacle

User · Answer

Here s a possible solution that will color the entire row for your table   CSS  tr highlighted td       background  red      jQuery      data tr   click function e            data tr   removeClass  highlighted          this  toggleClass  highlighted             Demo  http   jsfiddle net jrthib HVw7E 2

User · Answer

Remove the second id declaration of table     lt table id  data  border  1  cellspacing  1  width  500    id  table1    gt

User · Answer

Create a css class that applies the row color  and use jQuery to toggle the class on off   CSS    selected       background-color  blue      jQuery       data tr   on  click   function           this  toggleClass  selected          The first click will add the class  making the background color blue   and the next click will remove the class  reverting it to whatever it was before  Repeat   In terms of the two CSS classes you already have  I would change the  nonhighlighted class to apply to all rows of the table by default  then toggle the  highlighted on and off    lt style type  text css  gt    highlighted       background  red      data tr       background  white      lt  style gt       data tr   on  click   function           this  toggleClass  highlighted

User · Answer

I m not an expert in JQuery but I have the same scenario and I able to accomplis like this       data tr   click function         this  addClass  selected   siblings   removeClass  selected           Style    lt style type  text css  gt    selected       background  red      lt  style gt

[javascript] Changing the color of a clicked table row using jQuery

Examples related to javascript

Examples related to jquery