如何用javascript通过判断用户输入来改变表格颜色
我建了个contentedtitable的grid,我想通过点击该cell并输入"o"来改变该cell颜色.请问该怎么写javascript?
浮云间浏览 654回答 2
2回答
-
30秒到达战场
题主试下这段代码：<style>#grid { margin:1em auto; border-collapse:collapse; } #grid td { cursor:pointer; width:30px; height:30px; border:1px solid #666; text-align: center;}</style><table id="grid" align="center"> <tr> <td contenteditable="true">x</td> <td contenteditable="true">y</td> <td contenteditable="true">z</td> </tr></table><script>document.getElementById("grid").addEventListener("input", function(e) { if (e.target.innerHTML=="o") e.target.style.backgroundColor = 'lightblue';},false);</script>初始表格：更改内容后：根据题主提供代码修改如下：<html> <title>robot</title> <style>#mytable { margin:1em auto; border-collapse:collapse; } #mytable td { cursor:pointer; width:30px; height:30px; border:1px solid #666; text-align: center; contenteditable: true;}</style><table id="mytable" align="center"></table> <script> 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);</script> </html>在题主使用的火狐浏览器下测试截图如下：
随时随地看视频慕课网APP
相关分类
JavaScript