下面的代码将通过javascript函数创建一个填字游戏表,但为了用户的简单,我需要在每个框的左上角添加每个框的编号。如何为左上角的所有输入框创建数字?任何建议
我需要每个盒子边缘的数字不是占位符;我需要它修复
var currentTextInput;
var puzzelArrayData;
//Loads the Crossword puzzel
function initializeScreen() {
var puzzelTable = document.getElementById("puzzel");
puzzelArrayData = preparePuzzelArray();
for (var i = 0; i < puzzelArrayData.length; i++) {
var row = puzzelTable.insertRow(-1);
var rowData = puzzelArrayData[i];
for (var j = 0; j < rowData.length; j++) {
var cell = row.insertCell(-1);
if (rowData[j] != 0) {
var txtID = String('txt' + '_' + i + '_' + j);
cell.innerHTML = ' <input type="text" class="inputBox" maxlength="1" style="display:relative; font-size:16px;text-transform: uppercase; font-weight:700;" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">';
}
else {
cell.style.backgroundColor = "black";
}
}
}
addHint();
}
//Adds the hint numbers
function addHint() {
document.getElementById("txt_0_0").placeholder = "1";
document.getElementById("txt_0_7").placeholder = "2";
// document.getElementById("txt_1_5").placeholder = "3";
document.getElementById("txt_4_5").placeholder = "8";
document.getElementById("txt_6_0").placeholder = "6";
}
//Returns Array
function preparePuzzelArray() {
var items = [
['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0],
['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'],
['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'],
['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'],
['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'],
['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'],
['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'],
[0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0],
[0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'],
[0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0],
['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'],
['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0]
];
return items;
}
window.onload = initializeScreen;
&#13;
tr {
margin: 0;
padding: 0;
border-collapse: collapse;
}
td {
height: 30px;
width: 30px;
}
#leftBox {
float: left;
text-transform: uppercase;
}
#puzzel {
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
/* border: 1px solid black; */
}
.inputBox {
width: 37px;
height: 37px;
border: 1px solid white;
text-align: center;
padding: 0;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 2px solid black;
padding: 0;
}
&#13;
<div id="leftBox">
<table id="puzzel">
</table>
</div>
&#13;
答案 0 :(得分:2)
为每个输入包裹的div添加一个范围并设置范围样式:
var currentTextInput;
var puzzelArrayData;
//Loads the Crossword puzzel
function initializeScreen() {
var puzzelTable = document.getElementById("puzzel");
puzzelArrayData = preparePuzzelArray();
for (var i = 0; i < puzzelArrayData.length; i++) {
var row = puzzelTable.insertRow(-1);
var rowData = puzzelArrayData[i];
for (var j = 0; j < rowData.length; j++) {
var cell = row.insertCell(-1);
if (rowData[j] != 0) {
var txtID = String('txt' + '_' + i + '_' + j);
cell.innerHTML = '<div class="cell"><input type="text" class="inputBox" maxlength = "1" style = "display:relative; font-size:16px;text-transform: uppercase; font-weight: 700; " ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'" + ')">'+
' <span class="number">5</span></div>';
} else {
cell.style.backgroundColor = "black";
}
}
}
addHint();
}
//Adds the hint numbers
function addHint() {
document.getElementById("txt_0_0").placeholder = "1";
document.getElementById("txt_0_7").placeholder = "2";
// document.getElementById("txt_1_5").placeholder = "3";
document.getElementById("txt_4_5").placeholder = "8";
document.getElementById("txt_6_0").placeholder = "6";
}
//Returns Array
function preparePuzzelArray() {
var items = [
['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0],
['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'],
['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'],
['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'],
['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'],
['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'],
['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'],
[0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0],
[0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'],
[0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0],
['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'],
['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0]
];
return items;
}
initializeScreen();
tr {
margin: 0;
padding: 0;
border-collapse: collapse;
}
td {
height: 30px;
width: 30px;
}
#leftBox {
float: left;
text-transform: uppercase;
}
#puzzel {
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
/* border: 1px solid black; */
}
.inputBox {
width: 37px;
height: 37px;
border: 1px solid white;
text-align: center;
padding: 0;
z-index: 1;
float: left;
}
.cell {
position: relative;
}
.number {
position: absolute;
top: 0;
left: 0;
z-index: 2;
float: left;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 2px solid black;
padding: 0;
}
<div id="leftBox">
<table id="puzzel">
</table>
</div>
答案 1 :(得分:0)
使用背景图片:
var currentTextInput;
var puzzelArrayData;
//Loads the Crossword puzzel
function initializeScreen() {
var puzzelTable = document.getElementById("puzzel");
puzzelArrayData = preparePuzzelArray();
for (var i = 0; i < puzzelArrayData.length; i++) {
var row = puzzelTable.insertRow(-1);
var rowData = puzzelArrayData[i];
for (var j = 0; j < rowData.length; j++) {
var cell = row.insertCell(-1);
if (rowData[j] != 0) {
var txtID = String('txt' + '_' + i + '_' + j);
cell.innerHTML = '<input type="text" class="inputBox" maxlength="1" style="display:relative; font-size:16px;text-transform: uppercase; font-weight:700;" ' +
'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'" + ')">';
}
else {
cell.style.backgroundColor = "black";
}
}
}
addHint();
}
//Adds the hint numbers
function addHint() {
document.getElementById("txt_0_7").style.backgroundImage="url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+EGAQswAPUjKVAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABu0lEQVRYw+3XT4hNYRjH8Y8xSixETbZSGnZW0yiKhcKKQha2krJQLMTCz5+VbCiNmYWFKIUkZaOR7EwTVsqKFGqkFNFMjbF5p2Zj6tzr3HsX51enp/f0vud8z3Pe8zy/Q6NGjRo16mktaWdxkkEcxg5sxCpM4z2eYyTJ244DJlmPK9hbrjGDD/iJNVhXps7hOk4mmWnlXv0twB3ETazEBC7jSZLfC+asxRGcxXEM4FDtGSxwdzGLU7iWZG6R+UN4Vh7mQJL7VQH7Ks4fx2vsT3J1MbgCOIGLZXiilQz2VczgNwwleVRh2Z0Sh5L01Z1BSWYrLpkqcVk56gVsQZvnQZNM9xRgkqW4VIYPat+DFeGW4zZ24hPO9QxgkmG8LLXvM/Yk+drxVvePund6QYd5jKNJvnSlFy8A240z2FpOvcCFJOPdNgsbMFrMwq+y50aSvOm6m0myD7ewAjdwPsnU/97P/W3A3cMP7ErytGf8YJJNmCxWanuSyTpraSsZHC2v9VjdcK2YhWFsw0eMdcLyVy3U86bzYZI/vQi4pcRXPfnTVMrIAN7hexttsLaPZHWJg80PcaNGjRp1Rn8BzIeD3BWBBisAAAAASUVORK5CYII=)"
}
//Returns Array
function preparePuzzelArray() {
var items = [
['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0],
['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'],
['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'],
['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'],
['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'],
['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'],
['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'],
[0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0],
[0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'],
[0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0],
['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'],
['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0]
];
return items;
}
window.onload = initializeScreen;
tr {
margin: 0;
padding: 0;
border-collapse: collapse;
}
td {
height: 30px;
width: 30px;
}
#leftBox {
float: left;
text-transform: uppercase;
}
#puzzel {
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
/* border: 1px solid black; */
}
.inputBox {
width: 37px;
height: 37px;
border: 1px solid white;
text-align: center;
padding: 0;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 2px solid black;
padding: 0;
}
<div id="leftBox">
<table id="puzzel">
</table>
</div>
答案 2 :(得分:0)
您需要添加一个计数器以获得单元格总数(请参阅JS中的totalCells var)。 你需要在html中插入那个coutner。该计数器已添加到您的单元格的innerHTML中(请注意反引号样式变量插入的格式)。 输入字段和这个新计数器放在一个相对定位的div中,然后将计数器放在左上角的绝对位置。
这是一支工作笔https://codepen.io/anon/pen/opbpZm 这是html:
<div id="leftBox">
<table id="puzzel">
</table>
</div>
的CSS:
tr {
margin: 0;
padding: 0;
border-collapse: collapse;
}
td {
height: 30px;
width: 30px;
}
#leftBox {
float: left;
text-transform: uppercase;
}
#puzzel {
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
/* border: 1px solid black; */
}
.inputBox {
width: 37px;
height: 37px;
border: 1px solid white;
text-align: center;
padding: 0;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 2px solid black;
padding: 0;
}
/* some changes */
.input_container {
position:relative;
}
.input_counter {
position:absolute;
display:block;
left:2px;
top:0;
font-size:80%;
font-weight:bold;
z-index:100;
}
.input_container input {
}
JS:
var currentTextInput;
var puzzelArrayData;
//Loads the Crossword puzzel
function initializeScreen() {
var puzzelTable = document.getElementById("puzzel");
puzzelArrayData = preparePuzzelArray();
var totalCells = 0;
for (var i = 0; i < puzzelArrayData.length; i++) {
var row = puzzelTable.insertRow(-1);
var rowData = puzzelArrayData[i];
for (var j = 0; j < rowData.length; j++) {
var cell = row.insertCell(-1);
if (rowData[j] != 0) {
totalCells++;
var txtID = String('txt' + '_' + i + '_' + j);
cell.innerHTML = `<div class="input_container"><input type="text" class="inputBox" maxlength = "1" style = "display:relative; font-size:16px;text-transform: uppercase; font-weight: 700;" id="${txtID}" onfocus="textInputFocus(${txtID})"><span class="input_counter">${totalCells}</span></div>`;
}
else {
cell.style.backgroundColor = "black";
}
}
}
addHint();
}
//Adds the hint numbers
function addHint() {
document.getElementById("txt_0_0").placeholder = "1";
document.getElementById("txt_0_7").placeholder = "2";
document.getElementById("txt_1_5").placeholder = "3";
document.getElementById("txt_4_5").placeholder = "8";
document.getElementById("txt_6_0").placeholder = "6";
}
//Returns Array
function preparePuzzelArray() {
var items = [
['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0],
['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'],
['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'],
['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'],
['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'],
['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'],
['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'],
[0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0],
[0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'],
[0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0],
['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'],
['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0]
];
return items;
}
window.onload = initializeScreen;
答案 3 :(得分:0)
在纯css中,使用计数器。
每个细胞增加并用于“后”假元素。
body{ counter-reset: hints; }
td{ counter-increment: hints; }
td{ position:relative;}
td::after{ content:counter(hints); position:absolute; left:0; z-index:1}
如果您不想计算黑色单元格,请将增量从td更改为输入:
input{counter-increment: hints; }
var currentTextInput;
var puzzelArrayData;
//Loads the Crossword puzzel
function initializeScreen() {
var puzzelTable = document.getElementById("puzzel");
puzzelArrayData = preparePuzzelArray();
for (var i = 0; i < puzzelArrayData.length; i++) {
var row = puzzelTable.insertRow(-1);
var rowData = puzzelArrayData[i];
for (var j = 0; j < rowData.length; j++) {
var cell = row.insertCell(-1);
if (rowData[j] != 0) {
var txtID = String('txt' + '_' + i + '_' + j);
cell.innerHTML = ' <input type="text" class="inputBox" maxlength="1" style="display:relative; font-size:16px;text-transform: uppercase; font-weight:700;" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">';
}
else {
cell.style.backgroundColor = "black";
}
}
}
}
//Returns Array
function preparePuzzelArray() {
var items = [
['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0],
['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'],
['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'],
['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'],
['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'],
['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'],
['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'],
[0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0],
[0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'],
[0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0],
['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'],
['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0]
];
return items;
}
window.onload = initializeScreen;
tr {
margin: 0;
padding: 0;
border-collapse: collapse;
}
td {
height: 30px;
width: 30px;
}
#leftBox {
float: left;
text-transform: uppercase;
}
#puzzel {
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
/* border: 1px solid black; */
}
.inputBox {
width: 37px;
height: 37px;
border: 1px solid white;
text-align: center;
padding: 0;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 2px solid black;
padding: 0;
}
body{counter-reset: hints; }
td{counter-increment: hints; }
td{position:relative;}
td::after{content:counter(hints);position:absolute;left:0;z-index:1}
<div id="leftBox">
<table id="puzzel">
</table>
</div>
答案 4 :(得分:0)
所做的更改:
cell.innerHTML
。var index=1;
声明,并使用index++
递增。 .block { position: relative; } .number { position: absolute; top: 0; left: 0; }
document.addEventListener("DOMContentLoaded", function(event) {
var currentTextInput;
var puzzelArrayData;
var index = 1;
//Loads the Crossword puzzel
function initializeScreen() {
var puzzelTable = document.getElementById("puzzel");
puzzelArrayData = preparePuzzelArray();
for (var i = 0; i < puzzelArrayData.length; i++) {
var row = puzzelTable.insertRow(-1);
var rowData = puzzelArrayData[i];
for (var j = 0; j < rowData.length; j++) {
var cell = row.insertCell(-1);
if (rowData[j] != 0) {
var txtID = String('txt' + '_' + i + '_' + j);
cell.innerHTML = "<div class='block'><input type='text' class='inputBox' maxlength = '1' style = 'display:relative; font-size:16px;text-transform: uppercase; font - weight: 700;' id=" + txtID + "onfocus= textInputFocus(" + txtID + ")> <div class='number'>" + (index++) + "</div></div>";
} else {
cell.style.backgroundColor = "black";
}
}
}
addHint();
}
//Adds the hint numbers
function addHint() {
document.getElementById("txt_0_0").placeholder = "1";
document.getElementById("txt_0_7").placeholder = "2";
document.getElementById("txt_1_5").placeholder = "3";
document.getElementById("txt_4_5").placeholder = "8";
document.getElementById("txt_6_0").placeholder = "6";
}
//Returns Array
function preparePuzzelArray() {
var items = [
['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0],
['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'],
['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'],
['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'],
['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'],
['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'],
['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'],
[0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0],
[0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'],
[0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0],
['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'],
['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0]
];
return items;
}
initializeScreen();
});
&#13;
.block {
position: relative;
}
.number {
position: absolute;
top: 0;
left: 0;
}
tr {
margin: 0;
padding: 0;
border-collapse: collapse;
}
td {
height: 30px;
width: 30px;
}
#leftBox {
float: left;
text-transform: uppercase;
}
#puzzel {
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
/* border: 1px solid black; */
}
.inputBox {
width: 37px;
height: 37px;
border: 1px solid white;
text-align: center;
padding: 0;
z-index: 1;
float: left;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 2px solid black;
padding: 0;
}
&#13;
<div id="leftBox">
<table id="puzzel">
</table>
</div>
&#13;