我想用javascript写个网页上的10×10的clickable grid。通过点击每个cell，可以在上面输入1-9的数字。
我昨天在google上搜了很久都没有找到相关的代码，作为新手自己也实在写不出来，特来此求教，希望大家帮帮我吧。灰常感谢
大家讲道理2017-04-10 14:27:59
私以为对你来说应该是思路比代码更重要，再说我也不会真的为你这个问题去实现一个然后把代码送给你来抄，所以就写一个思路扼要吧。
HTML＋CSS 写一个 10x10 网格应该不是问题对吧，关键是 HTML 结构。这一点要考虑的细节不少，比如说怎么写有助于 DOM 查询和操作以提高性能等等……但是本着不要过早优化的原则，唯一需要确定的就是如何选择每一个格子，或者说当你点击每一个格子的时候，如何通过事件获知是哪一个格子被点击了？
id，然后把它们逐个保存起来，之后可以用一个通用的逻辑去单独处理每一个格子（最没效率的做法，但是很容易写和理解）click 事件获得的 event.target 拿到当前被点击的格子节点。你应该记得要利用事件委托，而不是给每一个格子都绑定 click 事件监听知道了哪一个被点击了，剩下的就简单多了。下一步需要的是能够输入 1-9 的数字，你可以创建一个 input 对象然后把它插入到被点击的格子节点处来接受用户输入（完事之后记得移除掉）。或者你可以直接为格子节点添加 contenteditable="true" 属性，让它变成可以输入的状态。
输入完以后要如何处理，这取决于你的业务逻辑，这一点你没有描述清楚，所以我只能打比方了。比如说你要验证用户输入的必须是 1-9，那么你可以捕获当前激活节点的 input 事件（只有比较新的浏览器才支持，要小心！），然后取值做验证；当然也可以用 blur 事件，在其失去焦点时验证，这要看你怎么设计交互体验了。
contenteditable="true" 元素的事件捕获可能会比较棘手，特别是向后兼容的考量，如果你确定要用这个方法，请查看：http://beta.caniuse.com/#feat=contenteditable，特别是底下的 Resources，阅读更多的资料。再往后的事情就不清楚你想做什么了，但只要思路清晰的话，相信你自己也可以找到解决方案。
Good Luck!
题主啊，问问题要有针对性，我上面说了一堆其实都是针对你一开始的描述来的，谁知道你竟然卡在创建表格这件事情上？
你就直说你不会创建 10x10 的 grid 不就好了嘛，真是误人误己……
一步一步来吧，先看这里：
http://jsfiddle.net/nightire/XPWMC/
以后问问题先把大问题拆成小步骤，然后一个个解决，否则很难找到针对性的答案。比如说你应该搜索 javascript create table，而不是什么 js clickable grid。
阿神2017-04-10 14:27:59
没怎么写过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>
黄舟2017-04-10 14:27:59
看了一下题主回复凡哥的代码，其实没什么问题，就是误把 # 写成了 .。
<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>
结果如下：
伊谢尔伦2017-04-10 14:27:59
简单说
function addText(button)
{
var textarea = document.getElementById('');//
textarea.innerHTML = textarea.innerHTML + button.value;
}
<input type='button' onclick='addText(this);' value='1' />
这样什么的。