I've developed a code that includes onclick events to change the color of buttons and prevent them from being clicked twice. Additionally, I am looking to have data added to a table column/row when a button is clicked. For example, clicking button 3 should output its id data to a column/row. Subsequently, clicking button 1 would add its id data to the same row/column, effectively adding it to the top of the list.
<!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>