html表格中的按钮不起作用

Question

我在html表格中放置了一个按钮，并且默认情况下禁用了它，我也将图片作为按钮背景放置，但是这不会显示出来。

请帮我解决这个问题。

这是我使用的HTML：

<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

我希望这会为你工作。此外，您不必在按钮中使用“按钮”，然后使用“img”。您只能使用带有多个CSS类的“按钮”，如class =“seat btn-img”。检查链接。

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

添加到您的网页的头：

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

，这些都是你的按钮：

<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

如果你只是想创建一个表使用像这样

里面的按钮

<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

这里是解决你的问题

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

下面是你尝试过的jsfiddle https://jsfiddle.net/mr7d22gw/1/