Question

我目前正在制作数独游戏板，而且我打算制作一个可点击的数字列表，玩家可以点击该列表输入数字值，而不必使用键盘输入数字。

我现在的细胞格式如下：

<div class="board">
      <div class="row" id="row1">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="row" id="row2">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
...

这些细胞是您期待数独游戏的标准细胞，目前我可以在其中输入数字。

我如何在这些单元格的右上角添加一个小方框，我可以点击？（点击后，它会显示一个弹出菜单，但这不是这个问题的重点，所以我稍后会研究。）

我想也许我应该使用class＆＃34; corner box＆＃34;在单元格中添加div标签。或其他东西，然后用它来使它向右上方移动。但是当我点击单元格输入值时，这不会干扰吗？

我将输入添加到单元格中：

$cell.html('<input type="text"/>').find('input').focus();

因此在单元格div中有一个div标签会很奇怪。

Answer 1

要在不替换当前内容的情况下向div添加元素，请使用append()。

var cell = document.getElementById('row1').children[0];
cell.appendChild(document.createElement("input"));

这是Fiddle Demo。

在输入单元格的一角创建一个小的可单击框，在单击时显示弹出列表。

1 个答案: