如何改变点击按钮样式并点击不同的按钮它应该改变为默认

Question

我有一些按钮，我想改变点击事件的按钮样式，但点击另一个按钮后，按钮样式应该是更改默认... 我正在获取按钮从DB像

<table class="table"> 
    <thead> 
    <tr> 
     <th style="text-align: center;">Tables</th> 
    </tr> 
    </thead> 
    <tbody> 
    @foreach($tables as $table) 
    <tr id="table"> 
     <td style="text-align: center;"> 
     <button class="btn" >{{$table->table_no}} </button> 
     </td> 
    </tr> 
    @endforeach 
    </tbody> 
</table> 

我的脚本是：

$('#table button').click(function(){ 
    $(this).css('background-color','green'); 
    }); 

问题是，如果我点击该按钮的不同按钮的背景颜色应该是改变默认情况下，我怎么能得到这个？ PLZ的帮助，比你。

Answer 1

的ID必须是唯一的，所以我删除从行的ID。

我也将嵌入式CSS移动到样式表。

你的循环内容应该是现在这个样子

<tr> 
    <td> 
    <button class="btn" >{{$table->table_no}} </button> 
    </td> 
</tr> 

示例代码

$(function() { 
 
    $('#table button').on("click",function(e){ 
 
    e.preventDefault(); 
 
    $('#table button').removeClass("selected"); 
 
    $(this).addClass("selected"); 
 
    }); 
 
});

#table th,td { text-align: center; } 
 
.selected { background-color:green }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="table" class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Tables</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <button class="btn" >{{$table->table_no}} </button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <button class="btn" >{{$table->table_no}} </button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <button class="btn" >{{$table->table_no}} </button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <button class="btn" >{{$table->table_no}} </button> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

Answer 2

使用添加类&删除类。

http://www.w3schools.com/jquery/html_addclass.asp

http://www.w3schools.com/jquery/html_removeclass.asp

Answer 3

你只能通过CSS做到这一点，下面添加到您的风格：

button { 
    background: grey; 
} 
button:active { 
    background: green; 
}