我正在尝试制作Killer Sudoku网格。这涉及在规则的3x3正方形内放置拼图粗线。我需要在每个单元格的右上角显示一个数字和一个运算。我已经用每个单元格作为文本框制作了一个表格。我需要在左上角放置一些文本，这些文本不能消失或删除。该文本的字体应较小。我尝试插入禁用的按钮和背景图像，但是它们都弄乱了表格的格式。 我知道基本的javascript html和CSS。
This is the image of my table.
var an=[1,6,2,3,5,4,2,4,3,1,6,5,5,1,4,6,3,2,4,2,6,5,1,3,3,5,1,4,2,6,6,3,5,2,4,1];
var i,k,e;
function show(b,a){
document.getElementById(b).style.display='block';
document.getElementById(a).style.display='none';
return false;
}
function sh(a,b,c,d,e){
document.getElementById(a).style.display='block';
document.getElementById(b).style.display='none';
document.getElementById(c).style.display='none';
document.getElementById(d).style.display='none';
document.getElementById(e).style.display='none';
return false;
}
function hide(b){
document.getElementById(b).style.display='none';
return false;
}
function check1(){
k=0;
var c=[];
for(i=1;i<37;i++){
a=document.getElementById("c1"+i).value;
c.push(a);
if(c[i-1]!=an[i-1])
k++;
}
ale(k);
}
function ale(k){
if(k==0)
alert("Right");
else
alert(k+" digits wrong");
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
.button {
background-color: #78909c;
border: none;
color: white;
padding: 15px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#submit{
margin-left: -63px;
height:30px;
width:60px;
font-size:10px;
background-color: transparent;
border: none;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
table{
border: 2px solid #000000;
}
td{
border: 1px solid #000000;
text-align: center;
vertical-align: middle;
}
input{
color: transparent;
border:1px;
padding: 10px;
text-align: center;
width: 100px;
text-shadow: 0 0 0 black;
height: 100px;
font-size: 50px;
background-color: #FFFFFF;
outline: none;
}
input:focus {
background-color: #e0e0e0;
}
.id{
width:10px;
height:10px;
}
#c11,#c12,#c13,#c14,#c15,#c16{border-top:3px solid #000000;border-bottom:3px solid #000000;}
#c18,#c19,#c110,#c111,#c131,#c132,#c133,#c134,#c135,#c136{border-bottom:3px solid #000000;}
#c119,#c120,#c121,#c122,#c123,#c124,#c131,#c132,#c133,#c134,#c126,#c127,#c129,#c130{border-top:3px solid #000000;}
#c11,#c17,#c113,#c119,#c125,#c131,#c114,#c120,#c126,#c13,#c133,#c110,#c116,#c122,#c128{border-left:3px solid #000000;}
#c14,#c122,#c134,#c111,#c117,#c129,#c135,#c16,#c112,#c118,#c124,#c130,#c136{border-right:3px solid #000000;}<head>
<div id="p1">
<a href="#" class="button" onclick="return sh('0','p1','p3','p2','p4');">HOME</a><br>
<table style:"align: center;">
<center><strong>KILLER MYSTERY OPERATION<br><br><br></strong></center>
<tr>
<td>
<input type="text" id="c11">
</td>
<td>
<input type="text" id="c12">
</td>
<td>
<input type="text" id="c13">
</td>
<td>
<input type="text" id="c14">
</td>
<td>
<input type="text" id="c15">
</td>
<td>
<input type="text" id="c16">
</td>
</tr>
<tr>
<td>
<input type="text" id="c17">
</td>
<td>
<input type="text" id="c18">
</td>
<td>
<input type="text" id="c19">
</td>
<td>
<input type="text" id="c110">
</td>
<td>
<input type="text" id="c111">
</td>
<td>
<input type="text" id="c112">
</td>
</tr>
<tr>
<td>
<input type="text" id="c113">
</td>
<td>
<input type="text" id="c114">
</td>
<td>
<input type="text" id="c115">
</td>
<td>
<input type="text" id="c116">
</td>
<td>
<input type="text" id="c117">
</td>
<td>
<input type="text" id="c118">
</td>
</tr>
<tr>
<td>
<input type="text" id="c119">
</td>
<td>
<input type="text" id="c120">
</td>
<td>
<input type="text" id="c121">
</td>
<td>
<input type="text" id="c122">
</td>
<td>
<input type="text" id="c123">
</td>
<td>
<input type="text" id="c124">
</td>
</tr>
<tr>
<td>
<input type="text" id="c125">
</td>
<td>
<input type="text" id="c126">
</td>
<td>
<input type="text" id="c127">
</td>
<td>
<input type="text" id="c128">
</td>
<td>
<input type="text" id="c129">
</td>
<td>
<input type="text" id="c130">
</td>
</tr>
<tr>
<td>
<input type="text" id="c131">
</td>
<td>
<input type="text" id="c132">
</td>
<td>
<input type="text" id="c133">
</td>
<td>
<input type="text" id="c134">
</td>
<td>
<input type="text" id="c135">
</td>
<td>
<input type="text" id="c136">
</td>
</tr>
</table>
<div id="r1-1">
<a href="#" class="button" onclick="return show('r1-2','r1-1');">Show rules</a><br>
</div>
<div id="r1-2" style="display:none;">
<a href="#" class="button" onclick="return show('r1-1','r1-2');">Hide rules</a><br>
<ul style="list-style-type:disc">
<li>Fill the grid with number between 1 to 6. No numbers should be repeated in any row or column.</li>
<li>The number in each grid is the target number and the symbol is the operation to be used.</li>
<li>Obtain an expression for a#b in terms of a and b. "x" means multiplication.<br><ul style="list-style-type:disc">
<li>3 # 1 = (2) x (1)</li>
<li>4 # 2 = (2) x (2)</li>
<li>5 # 4 = (1) x (4)</li>
<li>6 # 1 = (5) x (1)</li>
</ul></li>
<li>"∆" is the inverse operation of "#".<br>Hint:<br>If a # b = c then c ∆ b = a.</li>
</ul>
</div>
<button class="button" id="5" onclick=check1()>Check</button>
</div>
</head>
答案 0 :(得分：0)
使td为相对值，并在其中保持绝对定位的范围，该范围具有较小的数字； 基本上，添加这两种样式并在td中的每个输入标签之前保留一个跨度（具有较小的数字）。
td {
position: relative;
}
td span {
position: absolute;
top: 5px;
left: 5px;
font-size: 14px;
}
var an = [1, 6, 2, 3, 5, 4, 2, 4, 3, 1, 6, 5, 5, 1, 4, 6, 3, 2, 4, 2, 6, 5, 1, 3, 3, 5, 1, 4, 2, 6, 6, 3, 5, 2, 4, 1];
var i, k, e;
function show(b, a) {
document.getElementById(b).style.display = 'block';
document.getElementById(a).style.display = 'none';
return false;
}
function sh(a, b, c, d, e) {
document.getElementById(a).style.display = 'block';
document.getElementById(b).style.display = 'none';
document.getElementById(c).style.display = 'none';
document.getElementById(d).style.display = 'none';
document.getElementById(e).style.display = 'none';
return false;
}
function hide(b) {
document.getElementById(b).style.display = 'none';
return false;
}
function check1() {
k = 0;
var c = [];
for (i = 1; i < 37; i++) {
a = document.getElementById("c1" + i).value;
c.push(a);
if (c[i - 1] != an[i - 1])
k++;
}
ale(k);
}
function ale(k) {
if (k == 0)
alert("Right");
else
alert(k + " digits wrong");
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"><style>.button {
background-color: #78909c;
border: none;
color: white;
padding: 15px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#submit {
margin-left: -63px;
height: 30px;
width: 60px;
font-size: 10px;
background-color: transparent;
border: none;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
table {
border: 2px solid #000000;
}
td {
border: 1px solid #000000;
text-align: center;
vertical-align: middle;
}
input {
color: transparent;
border: 1px;
padding: 10px;
text-align: center;
width: 100px;
text-shadow: 0 0 0 black;
height: 100px;
font-size: 50px;
background-color: #FFFFFF;
outline: none;
}
input:focus {
background-color: #e0e0e0;
}
.id {
width: 10px;
height: 10px;
}
#c11,
#c12,
#c13,
#c14,
#c15,
#c16 {
border-top: 3px solid #000000;
border-bottom: 3px solid #000000;
}
#c18,
#c19,
#c110,
#c111,
#c131,
#c132,
#c133,
#c134,
#c135,
#c136 {
border-bottom: 3px solid #000000;
}
#c119,
#c120,
#c121,
#c122,
#c123,
#c124,
#c131,
#c132,
#c133,
#c134,
#c126,
#c127,
#c129,
#c130 {
border-top: 3px solid #000000;
}
#c11,
#c17,
#c113,
#c119,
#c125,
#c131,
#c114,
#c120,
#c126,
#c13,
#c133,
#c110,
#c116,
#c122,
#c128 {
border-left: 3px solid #000000;
}
#c14,
#c122,
#c134,
#c111,
#c117,
#c129,
#c135,
#c16,
#c112,
#c118,
#c124,
#c130,
#c136 {
border-right: 3px solid #000000;
}
td {
position: relative;
}
td span {
position: absolute;
top: 5px;
left: 5px;
font-size: 14px;
}<head>
<div id="p1">
<a href="#" class="button" onclick="return sh('0','p1','p3','p2','p4');">HOME</a><br>
<table style: "align: center;">
<center><strong>KILLER MYSTERY OPERATION<br><br><br></strong></center>
<tr>
<td>
<span>31</span>
<input type="text" id="c11">
</td>
<td>
<span></span>
<input type="text" id="c12">
</td>
<td>
<span>27</span>
<input type="text" id="c13">
</td>
<td>
<span></span>
<input type="text" id="c14">
</td>
<td>
<span></span>
<input type="text" id="c15">
</td>
<td>
<span>13</span>
<input type="text" id="c16">
</td>
</tr>
<tr>
<td>
<span>3</span>
<input type="text" id="c17">
</td>
<td>
<span>16</span>
<input type="text" id="c18">
</td>
<td>
<input type="text" id="c19">
</td>
<td>
<input type="text" id="c110">
</td>
<td>
<input type="text" id="c111">
</td>
<td>
<input type="text" id="c112">
</td>
</tr>
<tr>
<td>
<input type="text" id="c113">
</td>
<td>
<input type="text" id="c114">
</td>
<td>
<input type="text" id="c115">
</td>
<td>
<input type="text" id="c116">
</td>
<td>
<input type="text" id="c117">
</td>
<td>
<input type="text" id="c118">
</td>
</tr>
<tr>
<td>
<input type="text" id="c119">
</td>
<td>
<input type="text" id="c120">
</td>
<td>
<input type="text" id="c121">
</td>
<td>
<input type="text" id="c122">
</td>
<td>
<input type="text" id="c123">
</td>
<td>
<input type="text" id="c124">
</td>
</tr>
<tr>
<td>
<input type="text" id="c125">
</td>
<td>
<input type="text" id="c126">
</td>
<td>
<input type="text" id="c127">
</td>
<td>
<input type="text" id="c128">
</td>
<td>
<input type="text" id="c129">
</td>
<td>
<input type="text" id="c130">
</td>
</tr>
<tr>
<td>
<input type="text" id="c131">
</td>
<td>
<input type="text" id="c132">
</td>
<td>
<input type="text" id="c133">
</td>
<td>
<input type="text" id="c134">
</td>
<td>
<input type="text" id="c135">
</td>
<td>
<input type="text" id="c136">
</td>
</tr>
</table>
<div id="r1-1">
<a href="#" class="button" onclick="return show('r1-2','r1-1');">Show rules</a><br>
</div>
<div id="r1-2" style="display:none;">
<a href="#" class="button" onclick="return show('r1-1','r1-2');">Hide rules</a><br>
<ul style="list-style-type:disc">
<li>Fill the grid with number between 1 to 6. No numbers should be repeated in any row or column.</li>
<li>The number in each grid is the target number and the symbol is the operation to be used.</li>
<li>Obtain an expression for a#b in terms of a and b. "x" means multiplication.<br>
<ul style="list-style-type:disc">
<li>3 # 1 = (2) x (1)</li>
<li>4 # 2 = (2) x (2)</li>
<li>5 # 4 = (1) x (4)</li>
<li>6 # 1 = (5) x (1)</li>
</ul>
</li>
<li>"∆" is the inverse operation of "#".<br>Hint:<br>If a # b = c then c ∆ b = a.</li>
</ul>
</div>
<button class="button" id="5" onclick=check1()>Check</button>
</div>
</head>