Javascript 使用 document.createElement() 和 node .appendChild() 和 <table>答案

【问题标题】：Javascript using document.createElement() and node .appendChild() with <table>Javascript 使用 document.createElement() 和 node .appendChild() 和 <table>
【发布时间】：2017-04-10 23:25:26
【问题描述】：

所以我试图找出一种使用 document.createElement() 和 node.appendChild() 将行和表格单元格连接在一起的方法，但我对这些命令有点陌生。

<!DOCTYPE html>
<html onmousedown='event.preventDefault();'>
<head>
<title> Boxes </title>
<meta charset='utf-8'>
<style>

  table {
   border-spacing: 6px;
   border: 1px rgb(#CCC);
   margin-top: .5in;
   margin-left: 1in;
   }

  td {
   width: 40px; height: 40px; 
   border: 1px solid black;
   cursor: pointer;
   }

 </style>
 <script>

function colorize(el) {
  var
    r = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
    g = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
    b = ('0'+(Math.random()*255|0).toString(16)).slice(-2);
    el.style.backgroundColor = '#' +r+g+b;
    }
  </script>

填写以 id 'tb' 标识的表格主体 tbody 元素，使其成为一个 16x16 的表格，使用文档“create element”和“node append child”方法创建行和表格单元格并将它们连接在一起。

我知道它需要像“document body append Child(k)”这样的东西以及一个 var 来反映像“var k = document create element”这样的正确创建

</head>
<body onload='maketable();'>
<table>
<tbody id='tb'>

<script type="text/javascript">


var row = 16;
var cols = 16;

 for(var r=0;r<row;r++){
  document.write("</tr>");

 for(var c=0;c<cols;c++){
  document.write("<td onMouseEnter='colorize(this);'></td>"); 
  }
  document.write("</tr>");
  }

</script>

</tbody>
</table>
</body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

下面是一个带有 appendChild 的示例。查看代码时查看 cmets

function colorize(el) {
  r = ('0' + (Math.random() * 255 | 0).toString(16)).slice(-2),
    g = ('0' + (Math.random() * 255 | 0).toString(16)).slice(-2),
    b = ('0' + (Math.random() * 255 | 0).toString(16)).slice(-2);
  el.target.style.backgroundColor = '#' + r + g + b;
}
var row = 16;
var cols = 16;
// create a table element first
var table = document.createElement("table");
table.id = "tb"

for (var r = 0; r < row; r++) {
  var row = document.createElement("tr");
  table.appendChild(row);
  for (var c = 0; c < cols; c++) {
    var cell = document.createElement("td");
    //add A mouse enter event to each cell
    cell.addEventListener('mouseenter', colorize)
    cell.innerHTML = "cell";
    //append the cell object created to the row in focus
    row.appendChild(cell)
  }
}
//finally append the table to the body 
document.body.appendChild(table);

table {
  border-spacing: 6px;
  border: 1px rgb(#CCC);
  margin-top: .5in;
  margin-left: 1in;
}

td {
  width: 40px;
  height: 40px;
  border: 1px solid black;
  cursor: pointer;
}

【讨论】：

这太棒了！我做了一些更正，并注意到列和行的计数已关闭。它似乎忽略了我设置的 16x16。有什么我忽略的吗？
你能用里面的代码制作一个小提琴或钢笔吗？
是的，我已经在自己的 IDE 中运行了代码。我还修复了一些缺失的；我只是不确定为什么只有一行。