Button in HTML-Tabelle funktioniert nicht

Question

Ich stelle eine Schaltfläche in eine HTML-Tabelle und seine standardmäßig deaktiviert auch ich ein Bild als Schaltfläche Hintergrund, aber das wird nicht angezeigt.

Könnte ich bitte Hilfe dabei bekommen.

Dies ist der HTML-Code, ich verwende:

<table border="0" id="seat_btn"> 
<tr> 
    <td><button class="btn" id="a1" type="submit" style="border:0px; background-color:white;" onclick="alert('a1눌렸어요')"><img class="btn-img" src="seat1.png"></button></td> 
    <td><button class="btn" id="a2" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat2.png"></button></td> 
    <td></td><td></td><td></td><td></td><td></td><td></td> 
    <td><button class="btn" id="a3" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat3.png"></button></td> 
    <td><button class="btn" id="a4" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat4.png"></button></td> 
    <td></td><td></td><td></td><td></td><td></td><td></td> 
    <td><button class="btn" id="a5" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat5.png"></button></td> 
    <td><button class="btn" id="a6" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat6.png"></button></td> 
    </tr> 
    <tr> 
    <td><button class="btn" id="b1" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat1.png"></button></td> 
    <td><button class="btn" id="b2" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat2.png"></button></td> 
    <td></td><td></td><td></td><td></td><td></td><td></td> 
    <td><button class="btn" id="b3" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat3.png"></button></td> 
    <td><button class="btn" id="b4" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat4.png"></button></td> 
    <td></td><td></td><td></td><td></td><td></td><td></td> 
    <td><button class="btn" id="b5" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat5.png"></button></td> 
    <td><button class="btn" id="b6" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat6.png"></button></td> 
    </tr> 
    <tr> 
    <td><button class="btn" id="c1" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat1.png"></button></td> 
    <td><button class="btn" id="c2" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat2.png"></button></td> 
    <td></td><td></td><td></td><td></td><td></td><td></td> 
    <td><button class="btn" id="c3" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat3.png"></button></td> 
    <td><button class="btn" id="c4" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat4.png"></button></td> 
    <td></td><td></td><td></td><td></td><td></td><td></td> 
    <td><button class="btn" id="c5" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat5.png"></button></td> 
    <td><button class="btn" id="c6" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="seat6.png"></button></td> 
    </tr> 
    <tr><td><button type="submit" value="1" style="height:100px;" onclick="alert('안뇽')">dfdf</button></td></tr> 
</table> 

Answer 1

onclick button change imagehttps://codepen.io/DannaB67/pen/vZyLEo

Ich hoffe, dies wird für Sie arbeiten. Außerdem müssen Sie nicht "Knopf" und dann "Img" in der Taste verwenden. Sie können den "button" nur mit mehreren CSS-Klassen verwenden, wie class = "seat btn-img". Überprüfen Sie den Link.

<script type="javascript"> 
    $(".seat").click(function(){ 
    $(this).toggleClass("active") ; 
    }) 
</script> 

<style type="text/css"> 
    .seat{ 
    background-image: 
    url("https://cdn3.iconfinder.com/data/icons/sympletts-free- 
    sampler/128/tv- 
    seat-128.png"); 
    width:130px; 
    height:130px; 
    background-repeat:no-repeat; 
    background-color:transparent; 
    border:none; 
    } 

.seat.active{ 
    background-image: url("https://cdn3.iconfinder.com/data/icons/mobile- 
    friendly-ui/100/close-128.png"); 
    width:130px; 
    height:130px; 
    background-repeat:no-repeat; 
    background-color:transparent; 
    border:none; 
    } 
    </style> 

Fügen Sie diese auf den Kopf Ihrer Seite:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

und diese sind Ihre Tasten:

<button class="seat btn-img" id="a1" type="submit" style="border:0px; background-color:white; " onclick="#"></button> 
    <button class="seat btn-img" id="a2" type="submit" style="border:0px; background-color:white; " onclick="#"></button> 
    <button class="seat btn-img" id="a3" type="submit" style="border:0px; background-color:white; " onclick="#"></button> 
    <button class="seat btn-img" id="a4" type="submit" style="border:0px; background-color:white; " onclick="#"></button> 

Answer 2

wenn Sie nur Tasten wie diese

in einer Tabelle verwenden, um etwas schaffen wollen

<table><td> 
 
<a href="your tag here"> 
 
    <img src="https://image.flaticon.com/icons/png/128/8/8800.png"> 
 
</a> 
 
</td> 
 
<td> 
 
<a href="your tag2 here"> 
 
    <img src="https://image.flaticon.com/icons/png/128/69/69407.png"> 
 
</a> 
 

 
</td> 
 
</table>

Answer 3

Hier ist die Lösung für Ihr Problem

$(document).ready(function(){ 
 

 
$(".btn").click(function(){ 
 

 
$(this).find("img").prop('src', 'http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg') 
 

 
}); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="0" id="seat_btn"> 
 
<tr> 
 
<td> 
 
<button class="btn" id="a1" type="submit" style="border:0px; background-color:white;" onclick="alert('a1눌렸어요')"><img class="btn-img" src="https://www.w3schools.com/css/trolltunga.jpg" width="50px" height="50px"></button></td> 
 
<td><button class="btn" id="a2" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="https://www.w3schools.com/css/trolltunga.jpg" width="50px" height="50px"></button></td> 
 
<td></td><td></td><td></td><td></td><td></td><td></td> 
 
<td><button class="btn" id="a3" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="https://www.w3schools.com/css/trolltunga.jpg" width="50px" height="50px"></button></td> 
 
<td><button class="btn" id="a4" type="submit" style="border:0px; background-color:white;"><img class="btn-img" src="https://www.w3schools.com/css/trolltunga.jpg" width="50px" height="50px"></button></td> 
 
<td></td><td></td><td></td><td></td><td></td><td></td> 
 
</tr> 
 
</table>

hier ein jsfiddle https://jsfiddle.net/mr7d22gw/1/