使用jQuery和JavaScript在HTML表中创建行和单元格

我一直在浏览google和stack overflow来寻找答案，但我想直接得到我的问题的答案，因此这篇文章

所以，我对JavaScript和jQuery非常陌生，所以请原谅我的任何荒谬之处，哈哈

$(document).ready(function(){

  getGridSize();

});


function getGridSize() {
  sizeWidth = parseInt(prompt("Width?"));
  sizeHeight = parseInt(prompt("Height?"));
  fillGrid(sizeWidth, sizeHeight);
}

function fillGrid(width, height) {
  for (i = 0; i < height; i++) {
    $('table').append("<tr></tr>");
    for (j = 0; j < width; j++) {
      $('tr').append("<td><div></div></td>")
    };
  };
}

$（文档）.ready（函数（）{
getGridSize（）；
});
函数getGridSize（）{
sizeWidth=parseInt（提示（“宽度？”）；
sizeHeight=parseInt（提示（“高度”）；
填充网格（尺寸宽度、尺寸高度）；
}
函数填充网格（宽度、高度）{
对于（i=0；i

以上是我目前在.js文件中的内容。我使用的是一个骨架html文件，正文中有一个空的

我要做的是创建一个表的“宽度”和“高度”，并在每个单元格中填写

。我有一个css文件，可以将

文件更改为带有黑色边框的小正方形

我最近看到了一个教程，帮助开发了一个使用jQuery和JS创建滑块脚本的地方。这段代码确实让我想起了Ruby中使用

$（document）.ready（function（）

块作为初始化的class元素

我在这个项目上的最初尝试是模仿我在Ruby上的所见所闻。然而，结果并不像预期的那样，我希望得到一些关于我迄今为止所写内容的反馈

无论如何，欢迎所有建设性的批评。可以将jQuery

ready

块视为与Ruby中的

initialize

方法类似的函数吗？您在这里看到的任何我将来应该避免的否？请在正确的方向上进行任何有帮助的推动？：）

编辑：我想我在我的设计和创作中发现了一个错误。将在测试完成后进行编辑

Edit2：好的，我的另一次尝试没有成功（仍在寻求帮助

您可以使用

function fillGrid(width, height) {
    var htm = "";
  for (i = 0; i < height; i++) {
      htm += "<tr>";

      for (j = 0; j < width; j++) {
          htm += "<td></td>"
      };
      htm += "</tr>"
  };
    $("table").html(htm);
}

函数填充网格（宽度、高度）{
var htm=“”；
对于（i=0；i

---

但请不要这样做，这是一个糟糕的做法，有很多更简单的方法来处理页面中的动态内容，如果你想正确处理这种类型的事情，我强烈建议你学习，我发现它的教程与大多数其他工具相比特别好，所以阅读它不会太麻烦将函数

fillGrid

设置为该值

function fillGrid(width, height) {
    for (i = 0; i < height; i++) {

      var tr= $("<tr>");
      for (j = 0; j < width; j++) {
        tr.append("<td><div>test</div></td>");
      };
      var table = $("<table>");
      table.append(tr);
      $(document.body).append(table);
    };
  }

函数填充网格（宽度、高度）{
对于（i=0；i

检查普朗克

---

注意：我已经添加了示例文本test，以便您可以查看该表。

我建议您在基于模板的框架（如knockoutJS、AngularJS或类似的框架）中执行此操作。通过javascript/jquery的动态html不是一个非常可维护的模式。@TGH mvvc框架并不完全是入门级的javascriptknockout有一个非常好的教程而且可以在相当初级的水平上学习，我肯定会在不久的将来签出AngularJS，也许还会签出knockoutJS，但我只想用jQuery和JS来解决这个问题。我做这个问题只是为了学习。谢谢你的回复，把你给Eduardo的链接书签了：）据我所知，Angular比knockoutJS（更多功能）更好，我通常推荐knockout的唯一原因是因为我已经浏览了他们的两个页面，knockout很快就学会了谢谢Eduardo。我只是好奇，knockout.js会是学习angular.js的好前奏吗？我不知道，因为我在学习angular.js（转到另一家公司）时退出了web开发，但knockout让我对绑定有了一点了解，现在我不能在我使用的任何UI框架中没有它们。谢谢你的回答！不过，我对解决方案有一些疑问。我们如何存储

var tr=$（“”）我们第一次没有创建任何表行时？与将表格单元格追加到表格行相同。//另外，使用
document.body
，这会创建一个全新的表吗？如果我想编辑一个现有的表，我该怎么做呢？这就是JQuery的神奇之处，元素不需要出现在文档中。