phpstudy集成环境

 首页 > 如何用javascript写一个clickable grid？

如何用javascript写一个clickable grid？

我想用javascript写个网页上的10×10的clickable grid。通过点击每个cell，可以在上面输入1-9的数字。
我昨天在google上搜了很久都没有找到相关的代码，作为新手自己也实在写不出来，特来此求教，希望大家帮帮我吧。灰常感谢

简单说

function addText(button)
{
    var textarea = document.getElementById('');//
    textarea.innerHTML = textarea.innerHTML + button.value;
}

<input type='button' onclick='addText(this);' value='1' />

这样什么的。

私以为对你来说应该是思路比代码更重要，再说我也不会真的为你这个问题去实现一个然后把代码送给你来抄，所以就写一个思路扼要吧。

  1. HTML＋CSS 写一个 10x10 网格应该不是问题对吧，关键是 HTML 结构。这一点要考虑的细节不少，比如说怎么写有助于 DOM 查询和操作以提高性能等等……但是本着不要过早优化的原则，唯一需要确定的就是如何选择每一个格子，或者说当你点击每一个格子的时候，如何通过事件获知是哪一个格子被点击了？

    1. 比如说为每一个格子添加一个 id，然后把它们逐个保存起来，之后可以用一个通用的逻辑去单独处理每一个格子（最没效率的做法，但是很容易写和理解）
    2. 再比如说不去做事先存储，而是通过 click 事件获得的 event.target 拿到当前被点击的格子节点。你应该记得要利用事件委托，而不是给每一个格子都绑定 click 事件监听

  2. 知道了哪一个被点击了，剩下的就简单多了。下一步需要的是能够输入 1-9 的数字，你可以创建一个 input 对象然后把它插入到被点击的格子节点处来接受用户输入（完事之后记得移除掉）。或者你可以直接为格子节点添加 contenteditable="true" 属性，让它变成可以输入的状态。

  3. 输入完以后要如何处理，这取决于你的业务逻辑，这一点你没有描述清楚，所以我只能打比方了。比如说你要验证用户输入的必须是 1-9，那么你可以捕获当前激活节点的 input 事件（只有比较新的浏览器才支持，要小心！），然后取值做验证；当然也可以用 blur 事件，在其失去焦点时验证，这要看你怎么设计交互体验了。

    • 处理 contenteditable="true" 元素的事件捕获可能会比较棘手，特别是向后兼容的考量，如果你确定要用这个方法，请查看：http://beta.caniuse.com/#feat=contenteditable，特别是底下的 Resources，阅读更多的资料。

  4. 再往后的事情就不清楚你想做什么了，但只要思路清晰的话，相信你自己也可以找到解决方案。

Good Luck!

题主啊，问问题要有针对性，我上面说了一堆其实都是针对你一开始的描述来的，谁知道你竟然卡在创建表格这件事情上？

你就直说你不会创建 10x10 的 grid 不就好了嘛，真是误人误己……

一步一步来吧，先看这里：

http://jsfiddle.net/nightire/XPWMC/

以后问问题先把大问题拆成小步骤，然后一个个解决，否则很难找到针对性的答案。比如说你应该搜索 javascript create table，而不是什么 js clickable grid。

没怎么写过js，刚好拿来玩玩。我的chrome 34 (mac 10.9) 上通过。能用，不过兼容性怎么样就没有测试了：）

<html>
<head>
  <title>Widget test</title>
  <style type="text/css">
    table{
      border-collapse: collapse;
      border: 1px solid black;
    }
    table td{
      border: 1px solid black;
    }
    </style>
</head>

<body>


<form>
    <table id="myTable"/>
  </form>




<script >
   function b(){
      // 构建table 10X10
      var table = document.getElementById("myTable");
      var i;var j;
      for (i=0;i<5;i++){
        var row = table.insertRow(i);
        for (j=0;j<5;j++){
          var cell = row.insertCell(j);
          cell.innerHTML = i+ "X" +j;
          cell.addEventListener("click",
            function do_click(){
              addInput(this);
            });
        }
      }
    }
    function closeInput(elm) {
        var td = elm.parentNode;
        var value = elm.value;
        td.removeChild(elm);
        td.innerHTML = value;
    }
    function addInput(elm) {
        if (elm.getElementsByTagName('input').length > 0) return;
        var value = elm.innerHTML;
        elm.innerHTML = '';
        var input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.setAttribute('value', value);
        input.setAttribute('onBlur', 'closeInput(this)');
        input.setAttribute('onkeypress', 'return runScript(event)');
        elm.appendChild(input);
        input.focus();
    }
    function runScript(e) {
      if (e.keyCode == 13) {
          // closeInput(e.srcElement);
          e.srcElement.blur();
          return false;// cancel event bubble 
      }
      return true;
    }
    b();
   </script>


</body>
</html>

看了一下题主回复凡哥的代码，其实没什么问题，就是误把 # 写成了 .。

<style>
#grid { margin:1em auto; border-collapse:collapse; } 
#grid td { cursor:pointer; width:30px; height:30px; border:1px solid #666; }
</style>

<table id="grid"></table>

<script>
function grid() { 
  var grid = document.getElementById("grid"); 
  for(var r = 0; r < 10; r ++) { 
    var tr = grid.appendChild(document.createElement('tr'));
      for(var c = 0; c < 10; c ++) { 
        var cell = tr.appendChild(document.createElement('td')); 
      }  
  } 
}
grid(); 
</script>

结果如下：

【热门文章】
【热门文章】