html表格中的按钮不起作用答案

【问题标题】：Button in html table doesn't workhtml表格中的按钮不起作用
【发布时间】：2017-06-15 08:51:58
【问题描述】：

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

【问题讨论】：

贴出你试过的代码。
等一下 :) 我正在找它
我想告诉你这个代码是用来制作“电影院座位”的

标签： javascript html css button html-table

【解决方案1】：

如果您只想在表格中创建按钮，请使用类似的东西

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

【讨论】：

【解决方案2】：

这里是你的问题的解决方案

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

【讨论】：

【解决方案3】：

onclick button change image https://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>

【讨论】：