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

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

的内容

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

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>

Answer 3

Here is the solution to your 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>

Here's a jsfiddle https://jsfiddle.net/mr7d22gw/1/

html表格中的按钮不起作用

3 个答案: