พอกดเลขหรือรูปด้านล่างให้มันเเสดงรูปที่ช่องบน เเต่จะเอาเลขที่วงกลมออกยังไงครับ
อีกอย่างครับ จะลดขนาดที่เเสดงให้เล็กกว่านี้ได้ไหม
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<style>
*{
margin: 0;
padding: 0;
}
table, th {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
width: 100%;
}
td {
border: 1px solid black;
border-collapse: collapse;
width: 40px;
height: 20px;
}
.set1 {
border: none;
outline: none;
background-color: #f1f1f1;
cursor: pointer;
font-size: 25px;
}
.active, .set1:hover {
background-color: #666;
color: white;
}
div.f1{
width: 1000px;
}
</style>
</head>
<body>
<script>
myFunction = i => $(".demo1 td:empty:first").html($(i).html());
</script>
<div >
<table class="demo1" style="background-color:#E6E6E6">
<tbody>
<tr>
<td>
<table style="border: 0px;">
<tbody>
<tr>
<td colspan="2" style="border: 0px;" id="resultsicbo-1-0-0"></td>
</tr>
<tr>
<td style="border: 0px;" ></td>
<td style="border: 0px;" ></td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="border: 0px;">
<tbody>
<tr>
<td colspan="2" style="border: 0px;" id="resultsicbo-1-0-0"></td>
</tr>
<tr>
<td style="border: 0px;" ></td>
<td style="border: 0px;" ></td>
</tr>
</tbody>
</table>
</td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
<br><br><br>
</div>
<div class="f1">
<table>
<tbody>
<tr>
<td id="test1">
<table style="border: 0px;" >
<tbody>
<tr onclick="myFunction(this)" >
<td width="50%" class="set1" style="border: 0px;">1</td>
<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number1.png"></td>
</tr>
</tbody>
</table>
</td>
<td id="test2">
<table style="border: 0px;" >
<tbody>
<tr onclick="myFunction(this)" >
<td width="50%" class="set1" style="border: 0px;">2</td>
<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number2.png"></td>
</tr>
</tbody>
</table>
</td>
<td id="test1">
<table style="border: 0px;" >
<tbody>
<tr onclick="myFunction(this)" >
<td width="50%" class="set1" style="border: 0px;">3</td>
<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number3.png"></td>
</tr>
</tbody>
</table>
</td>
<td id="test1">
<table style="border: 0px;" >
<tbody>
<tr onclick="myFunction(this)" >
<td width="50%" class="set1" style="border: 0px;">4</td>
<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number4.png"></td>
</tr>
</tbody>
</table>
</td>
<td id="test1">
<table style="border: 0px;" >
<tbody>
<tr onclick="myFunction(this)" >
<td width="50%" class="set1" style="border: 0px;">5</td>
<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number5.png"></td>
</tr>
</tbody>
</table>
</td>
<td id="test1">
<table style="border: 0px;" >
<tbody>
<tr onclick="myFunction(this)" >
<td width="50%" class="set1" style="border: 0px;">6</td>
<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number6.png"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
พัฒนาเว็บไซต์
