javascript - 如何更改单击按钮的样式并单击不同的按钮应更改为默认值

Question

我有很多按钮，我想在单击事件时更改按钮的样式，但是在单击另一个按钮后，按钮样式应该更改为默认...我正在从数据库中获取按钮，例如

<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');
  });

问题是，如果我点击不同的按钮，该按钮的背景颜色应该更改为默认颜色，我怎样才能得到这个？请帮助，比你。

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>