Jquery背景颜色改变按钮点击表内

jquery background color change on button click inside table

本文关键字：按钮 背景 颜色 改变 Jquery      更新时间：2023-09-26

我在表格里面有按钮，在表格里面按钮被点击想要改变这个按钮的背景颜色和其他相同颜色的按钮

我尝试使用jquery像下面

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

但它只适用于一个按钮

<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>

你必须用它的class cellGreen 

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

你可能需要这个:

将选择器更改为.cellGreen类，并应用以下脚本，将其他按钮的背景设置为默认，并将红色设置为单击的按钮。

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

Demo

对于所有按钮使用$('td button')作为选择器

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

点击所有按钮，使用:

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

注意:您的最后两个按钮有重复的id。

相关文章：