Question

我一直在浏览谷歌和堆栈溢出以找到答案，但我想直接回答我的问题，因此帖子。

所以，我是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>")
    };
  };
}

以上是我目前在.js文件中的内容。我正在使用正文中的空<table> </table>的骨架html文件。

我要做的是创建表格的“宽度”和“高度”，并在每个单元格中填入<div>。我有一个css文件将<div>文件更改为带有黑色边框的小方块。

我最近看到了Helping Develop的一个教程，他们用jQuery和JS创建了一个滑块脚本。代码真的让我想起了使用$(document).ready(function()块作为初始化的Ruby中的类元素。

我对这个项目的初步尝试是模仿我所看到的以及我使用Ruby所经历的事情。但是，它并没有达到预期的效果，我想得到一些关于我到目前为止所写内容的反馈。

无论如何，所有建设性的批评都受到欢迎。是否可以将jQuery ready块视为与Ruby中的initialize方法类似的函数？你在这里看到的任何禁忌，我将来应该避免吗？有什么有用的推动方向吗？：）

编辑：我认为我和我的创作有误。一旦测试就会编辑。

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

Answer 1

您可以使用

执行此操作

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);
}

但请不要，这是一种可怕的做法，并且有更简单的方法来处理页面中的动态内容，如果你想处理这个问题，我强烈建议你学习knockout.js正确的类型，我觉得它的教程与大多数其他工具相比特别好，所以通过它不会太麻烦

Answer 2

您应该将函数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);
    };
  }

检查plunker here。

注意：我添加了示例文本测试，以便您可以看到该表。

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

2 个答案: