javascript - 使用 JavaScript 根据给定数字生成 HTML 表格

Question

我之前提出了一种情况，解决了从给定单词生成表格并沿对 Angular 线打印的问题。

但这一次，我需要使用 JavaScript(没有 jQuery 或其他替代方法)根据给定的数值生成一个表。给定值决定列数和行数(始终相等)。

示例:我将数字 8 指定给我的文本输入，JavaScript 会生成一个包含 8 列和 8 行的表格。

该值必须是数字，因此如果给定值为 NaN，则运行应该中断。

这是我之前尝试修改的代码以实现此目的，但失败得很惨:

function generateTable() {
  var $c = document.getElementById("container");
  var $table = document.createElement('table');
  var $tbody = document.createElement('tbody');
  var word = document.getElementById('word').value.split("");
  $c.appendChild($table);
  $table.appendChild($tbody);
  for (var i=0, l=word.length; i<l; i++) {
    var $tr = document.createElement('tr');
    $tbody.appendChild($tr);
    for (var j=0, jl=word.length; j<jl; j++) {
      var $td = document.createElement('td');
      $td.appendChild(document.createTextNode(i==j ? word[i] : "-"));
      $tr.appendChild($td);
    } 
  }
}

<textarea id="word"></textarea><br>
<button id="generate" onclick="generateTable();">Generate</button>
<div id="container"></div>

是的，它处理给定的单词并将其对 Angular 打印，我尝试更改一些值并对其生成表格的方式产生影响，但成功地破坏了整个过程。这就是为什么我没有发布我修改的代码，而是发布我开始修改的代码。

Answer 1

这是我想出的，没有 jQuery:

HTML:

<h3>Create your table!</h3>
<input type="text" id="trc" />
<button id="create">Create</button>
<div id="table"></div>

JavaScript:

document.getElementById("create").onclick=function() {
    var trtd = document.getElementById("trc").value;
    if(isNaN(trtd) || trtd < 1) {
        document.getElementById("table").innerHTML = "The given value must be a number!";
    }
    else {
        var table = "<table>";
        for(i = 0; i < trtd; i++) {
            table += "<tr>";
            for(j = 0; j < trtd; j++) {
                table += "<td>Cell</td>";
            }
            table += "</tr>";
        }
        table += "</table>";
        document.getElementById("table").innerHTML = table;
    }
}

您可以用您喜欢的任何值填充单元格。

参见Fiddle