Question

我有带有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>

Answer 1

这是您想要的吗？您已经具有单击功能，只需要在ID为.append()的表的新行。像$("tr").append("<td>" + $(this).attr('id') + "</td>");

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

工作片段：

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

多个onclick事件-文本输出

1 个答案: