wie man den Stil der Schaltfläche beim Klicken ändern und klicken Sie auf andere Schaltfläche sollte es auf Standard ändern

Question

Ich habe die Anzahl der Schaltflächen, ich möchte den Stil der Schaltfläche auf Click-Ereignis ändern, aber nach dem Klicken auf eine andere Schaltfläche, die Schaltfläche sollte sein ändern Standard zu ... ich bin Abrufen Tasten von DB wie

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

mein Skript ist:

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

Problem ist, wenn ich andere Schaltfläche Hintergrundfarbe dieser Schaltfläche klicken sollte Änderung Verzug, Wie kann ich das bekommen ?? Hilfe, als du.

Answer 1

IDs müssen eindeutig sein, so entfernte ich die IDs von den Zeilen.

Ich habe auch die Inline-CSS in ein Stylesheet verschoben.

Ihre Schleife Inhalte wie diese jetzt auf

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

Beispielcode

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

Verwenden Sie die Klasse & Klasse entfernen.

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

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

Answer 3

Sie können dies durch CSS nur tun, fügen Sie unten in Stil:

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