jquery background color change on button click inside table

Question

I have buttons inside the table, inside table button is clicked want to change the background color of that button and other buttons on same color

I tried using jquery like below

$('#bt1').click(function() {
    $('#bt1').css('background', 'red');
});

but it works for one button only

<table id="abcd">
    <tr>
        <td><button class="cellGreen" id="bt1"><font>HOME</font></button></td>
        <td><button class="cellGreen" id="bt2"><font>PROJECT</font></button></td>
        <td><button class="cellGreen" id="bt3"><font>TEST</font></button></td>
        <td><button class="cellGreen" id="bt4"><font>Help</font></button></td>
    </tr>           
</table>

<button id="btdffd1"><font>Other Buttons</font></button>
<button id="btdffd1"><font> Buttons</font></button>

Govind Singh · Accepted Answer · 2019-03-11 06:08:08Z

3

you have to go with its class cellGreen

$('.cellGreen').click(function() {
  $('.cellGreen').css('background', '');
  $(this).css('background', 'red');
});

edited Mar 11, 2019 at 6:08

answered Jun 24, 2014 at 10:26

Govind Singh

15.5k14 gold badges77 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dhaval Marthak · Accepted Answer · 2014-06-24 10:27:17Z

1

You probably need this:

Change your selector to a class .cellGreen and apply following script which will set other button's background to default and set red to the clicked one.

$('.cellGreen').click(function () {
     $(".cellGreen").css("background","");
     $(this).css('background', 'red');
});

Demo

answered Jun 24, 2014 at 10:27

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Comments

Shaunak D · Accepted Answer · 2014-06-24 10:37:01Z

0

Demo

For all buttons use $('td button') as the selector

$('#bt1').click(function() {
    $('button.cellGreen').css('background', 'red');
});

For click on all buttons, use:

$('button.cellGreen').click(function() {
    $('button.cellGreen').css("background","");
    $(this).css('background', 'red');
});

Note : Your last two buttons have duplicate Ids.

edited Jun 24, 2014 at 10:37

answered Jun 24, 2014 at 10:23

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

1 Comment

Subha Chandra Over a year ago

it will change background color of all the buttons, here i want to change the color of clicked button(inside the table) only

Collectives™ on Stack Overflow

jquery background color change on button click inside table

3 Answers 3

Comments

Demo

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related