Jquery在div中动态写入

时间:2010-01-23 15:49:14

标签: javascript jquery

我正在尝试使用jquery和php创建一个数独游戏。我已完成所有游戏逻辑,现在正在使用它的用户端。所以我需要做的是能够点击一个空单元格,这将是一个div,它将使div成为活动的div。然后使用键盘上的数字输入用户想要的数字。他们还必须能够删除该条目。

有什么想法吗?我之前使用过jquery,但不知道从哪里开始。感谢

尼克

3 个答案:

答案 0 :(得分:2)

我不一定主张使用插件来实现这种功能,你可以使用基本的jquery。假设你有这样的结构:

<div>7</div>
<div></div>
<div></div>
...

您可以执行以下操作:

$("div").click(function(i, div) {
  if ($(div).find("input") {
    // already editing an element, bail out
    return;
  }

  var number = $(div).text();
  $(div).empty.append($("<input>"));
  var input = $(div).find("input");

  if (number) { // prefil number back to the input
    input.attr("value", number);
  }

  input.keyup(function(e) {
    if (e.keyCode == 13) { // enter pressed
      var value = parseInt($(this).value(), 10);
      if (value) {
        $(this).parent().empty().text(value);
      } else {
        // sorry mate, display error message or something
      }
    }
  });
});

代码的作用是点击一个div,它用一个输入替换它的内容,由前面的数字预先填充,当用户按下回车时,它检查输入并再次用文本替换输入。 / p>

我正在写这篇文章,对于任何语法错误都很抱歉,意思应该是明确的。

答案 1 :(得分:1)

“编辑就地插件,允许您通过点击来编辑xhtml元素。支持输入文本类型,文本区域和选择。”

http://plugins.jquery.com/project/jeditable

这将是一个非常好的开始,但它使用表单元素,可能不是你想要的。你有可能自己写点东西。

您可以为onclick附加事件处理程序 - 突出显示该正方形,然后按下数字键按下该正方形。 我不认为存在能为你做这件事。

看起来其他人已经做过了 - 看看并学习他们的做法:

http://yoan.dosimple.ch/blog/2008/04/30/sudoku.html

答案 2 :(得分:1)

单击div时,在div中创建输入元素

写入值并按Enter /单击确定后,input元素的值将替换div中的内容。

或者,如果您考虑采用中心方法,则只能有一个输入元素,只能缓存活动div,即要替换的内容。