html表格点击改变此格颜色,如何用javascript通过判断用户输入来改变表格颜色

题主试下这段代码：

#grid { margin:1em auto; border-collapse:collapse; }

#grid td { cursor:pointer; width:30px; height:30px; border:1px solid #666; text-align: center;}

x

y

z

document.getElementById("grid").addEventListener("input", function(e) {

if (e.target.innerHTML=="o") e.target.style.backgroundColor = 'lightblue';

},false);

初始表格：

更改内容后：

根据题主提供代码修改如下：

robot

#mytable { margin:1em auto; border-collapse:collapse; }

#mytable td { cursor:pointer; width:30px; height:30px; border:1px solid #666; text-align: center; contenteditable: true;}

var mytable = document.getElementById('mytable');

for (var i = 0; i < 10; i++) {

var tr = mytable.insertRow();

for (var j = 0; j < 10; j++) {

var td = tr.insertCell();

td.contentEditable = true;

}

}

document.getElementById("mytable").addEventListener("input", function(e) {

if (e.target.innerHTML=="o") e.target.style.backgroundColor = 'lightblue';

},false);

在题主使用的火狐浏览器下测试截图如下：