クリック時のボタンのスタイルを変更して別のボタンをクリックする方法デフォルトに変更する必要があります

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> 

のようにDBからボタンを取得しています：

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

問題は、私はそのボタンの異なるボタンの背景色をクリックすると、デフォルトに変更する必要がありますですどのように私はこれを得ることができますか？ PLZヘルプ、あなたより。

Answer 1

IDはので、私は行からIDを削除ユニークである必要があります。

また、インラインCSSをスタイルシートに移動しました。

あなたのループコンテンツは

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

use add class &クラスを削除します。

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