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

Question

下面的代码将通过 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;

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>

Answer 1

将跨度添加到您环绕每个输入的 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>