在每个输入框的顶部边缘添加数字

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 添加一个 span 并设置 span 的样式：

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>

Answer 2

使用背景图片：

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>

Answer 3

您需要添加一个计数器来获取单元格的总数（请参阅 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;

Answer 4

所做的更改：

• 修复了您的cell.innerHTML。
• 添加了一个索引计数器以增加每个块的索引号。该变量在顶部var index=1; 声明并使用index++ 递增。
• 为块和编号添加的 CSS 是：

.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();
});

.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;
}

<div id="leftBox">
  <table id="puzzel">
  </table>
</div>

Answer 5

在纯 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：

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>