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

我有很多按钮，我想改变点击事件中按钮的样式，但在点击另一个按钮后，按钮样式应该改变为默认。。。 我正在从DB like获取按钮

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

---

问题是，若我点击不同的按钮，那个按钮的背景色应该改为默认，我怎么能得到这个？？plz帮助，而不是您。

使用添加类和删除类

---

只有通过

CSS

才能做到这一点，将以下内容添加到您的样式中：

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

---

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

我还将内联CSS移动到样式表中

您的循环内容现在应该是这样的

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

#表th，td{text align:center；}
.所选{背景色：绿色}

桌子
{{$table->table_no}
{{$table->table_no}
{{$table->table_no}
{{$table->table_no}

Link-only答案不受欢迎。到W3Schools的链接加倍。这只会使它们在按下按钮时变为绿色。谢谢，但我不知道表的数量，我正在从数据库中获取表

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