时间戳

首页 > 解决方案 > 多个 onclick 事件 - 文本输出

javascript - 多个 onclick 事件 - 文本输出

问题描述

我有带有 onclick 事件的代码，用于更改按钮颜色和停止按钮被点击两次。我还想补充一点，当单击按钮时，它会将文本/数据添加到表格列/行中。单击按钮 3，按钮 3 中的 id 数据输出到列/行。接下来单击按钮 1，将 id 数据添加到同一行/列，只需将其添加到列表顶部。

<!DOCTYPE html>
<html>

<head>
  <script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".button").click(function () {
        $(this).css('background', 'yellow');
      });
    });
  </script>
  <style>
    .button {
      background-color: #FFFFFF;
      /* White */
      border: 2px solid #f44336;
      color: black;
      padding: 10px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 50px;
      border-radius: 50%;
      width: 80px;
      text-align: center;
      cursor: pointer
    }

    .disabled {
      background-color: #0000ff;
      /* Blue */
      color: white;
      cursor: not-allowed;
    }

    .button-clicked {
      background-color: #FFFF00;
      /* Yellow */
    }

    .buttonreset {
      background-color: #FF0000;
      /* Red */
      border: 4px solid #f44336;
      color: black;
      padding: 10px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      border-radius: 20%;
      width: 180px;
      text-align: center;
      cursor: pointer
    }

    td:not(:first-child) {
      padding-top: 5px;
      padding-bottom: 5px;
      padding-right: 5px;
    }
  </style>
</head>

<body bgcolor="black" text="white">
  <table width="100%">
    <tr>
      <td align="center"><button class="button" id="B1" onclick="myFunction(); 
this.disabled = true">1</button></td>
      <td align="center"><button class="button" id="B2" onclick="myFunction(); this.disabled = true">2</button></td>
      <td align="center"><button class="button" id="B3" onclick="myFunction(); this.disabled = true">3</button></td>
      <td>PUT ID DATA HERE IN ORDER OF BUTTON PRESSED
      </td>
    </tr>
  </table><br><br><br><br>
</body>

</html>

标签： javascripthtmlcss

解决方案

这是你想要的吗？你已经有一个点击功能，你只需要.append()一个新的行到带有 id 的表。就像是$("tr").append("<td>" + $(this).attr('id') + "</td>");

同时onclick="myFunction(); this.disabled = true"从您的 HTML 中删除它，因为它会引发错误。

工作片段：

<!DOCTYPE html>
<html>

<head>
  <script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".button").click(function () {
        $(this).css('background', 'yellow');
        $("tr").append("<td>" + $(this).attr('id') + "</td>");
      });
    });
  </script>
  <style>
    .button {
      background-color: #FFFFFF;
      /* White */
      border: 2px solid #f44336;
      color: black;
      padding: 10px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 50px;
      border-radius: 50%;
      width: 80px;
      text-align: center;
      cursor: pointer
    }

    .disabled {
      background-color: #0000ff;
      /* Blue */
      color: white;
      cursor: not-allowed;
    }

    .button-clicked {
      background-color: #FFFF00;
      /* Yellow */
    }

    .buttonreset {
      background-color: #FF0000;
      /* Red */
      border: 4px solid #f44336;
      color: black;
      padding: 10px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      border-radius: 20%;
      width: 180px;
      text-align: center;
      cursor: pointer
    }

    td:not(:first-child) {
      padding-top: 5px;
      padding-bottom: 5px;
      padding-right: 5px;
    }
  </style>
</head>

<body bgcolor="black" text="white">
  <table width="100%">
    <tr>
      <td align="center"><button class="button" id="B1">1</button></td>
      <td align="center"><button class="button" id="B2">2</button></td>
      <td align="center"><button class="button" id="B3">3</button></td>
      </td>
    </tr>
  </table><br><br><br><br>
</body>

</html>

推荐阅读