使用jQuery和JavaScript在HTML表格中創建行和單元格

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文件中所擁有的。 我使用的是一個html框架文件，其中的主體中有一個空的<table> </table> 。

我想做的是創建一個表的“寬度”和“高度”，並在每個單元格中填寫<div> 。 我有一個CSS文件，可將<div>文件更改為帶有黑色邊框的小方塊。

我最近在Helping Develop上看到了一個教程，其中他們使用jQuery和JS創建滑塊腳本。 該代碼確實使我想起了Ruby中使用$(document).ready(function()塊作為初始化的類元素。

我對該項目的最初嘗試是對我所看到的以及我對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);
}

但是請不要這樣，這是一種糟糕的做法，並且有很多更簡單的方法來處理頁面中的動態內容，如果您想正確處理這種類型的事情，我強烈建議您學習kickout.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);
    };
  }

在這里檢查pl子。

注意：我添加了示例文本測試，以便您可以看到表格。