Javascript 在每个输入框的上边缘添加数字

下面的代码将通过javascript函数创建一个纵横字谜表，但我需要在每个框的左上角为每个框添加数字，以便于用户使用。如何为左上角的所有输入框创建数字？？有什么建议吗

我需要在每个框边缘的数字，而不是占位符；我需要修理一下

var currentTextInput；
var puzzelArrayData；
//加载填字游戏puzzel
函数initializeScreen（）{
var puzzelTable=document.getElementById（“puzzel”）；
puzzelArrayData=preparePuzzelArray（）；
对于（变量i=0；i
tr{
保证金：0；
填充：0；
边界塌陷：塌陷；
}
运输署{
高度：30px；
宽度：30px；
}
#左框{
浮动：左；
文本转换：大写；
}
#普泽尔{
文本对齐：居中；
保证金：0；
填充：0；
边界塌陷：塌陷；
/*边框：1px纯黑*/
}
.输入框{
宽度：37px；
高度：37像素；
边框：1px纯白；
文本对齐：居中；
填充：0；
}
桌子{
边界塌陷：塌陷；
}
桌子
th，
运输署{
边框：2件纯黑；
填充：0；
}
在围绕每个输入的div中添加一个span，并设置span的样式：


var currentTextInput；
var puzzelArrayData；
//加载填字游戏puzzel
函数initializeScreen（）{
var puzzelTable=document.getElementById（“puzzel”）；
puzzelArrayData=preparePuzzelArray（）；
对于（变量i=0；i
tr{
保证金：0；
填充：0；
边界塌陷：塌陷；
}
运输署{
高度：30px；
宽度：30px；
}
#左框{
浮动：左；
文本转换：大写；
}
#普泽尔{
文本对齐：居中；
保证金：0；
填充：0；
边界塌陷：塌陷；
/*边框：1px纯黑*/
}
.输入框{
宽度：37px；
高度：37像素；
边框：1px纯白；
文本对齐：居中；
填充：0；
z指数：1；
浮动：左；
}
.细胞{
位置：相对位置；
}
.号码{
位置：绝对位置；
排名：0；
左：0；
z指数：2；
浮动：左；
}
桌子{
边界塌陷：塌陷；
}
桌子
th，
运输署{
边框：2件纯黑；
填充：0；
}
使用背景图像：


var currentTextInput；
var puzzelArrayData；
//加载填字游戏puzzel
函数initializeScreen（）{
var puzzelTable=document.getElementById（“puzzel”）；
puzzelArrayData=preparePuzzelArray（）；
对于（变量i=0；i<div id="leftBox">
  <table id="puzzel">
  </table>
</div>

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 {
}

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;

body{ counter-reset: hints; }
td{ counter-increment: hints; }
td{ position:relative;}
td::after{ content:counter(hints); position:absolute; left:0; z-index:1}

input{counter-increment: hints; }

.block {
  position: relative;
}

.number {
  position: absolute;
  top: 0;
  left: 0;
}