Using jQuery and JavaScript to create rows and cells in an HTML table

Question

I've been browsing around google and stack overflow to find an answer, but I'd like to get a direct answer to my question, thus the post.

So, I'm very new to JavaScript and jQuery, so pardon any ridiculousness haha.

$(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>")
    };
  };
}

The above is what I have in my .js file currently. I'm using a skeleton html file with an empty <table> </table> in the body.

What I'm trying to do is create a "width" and "height" of a table and fill in <div> in each cell. I have a css file to change the <div> files into small squares with black borders.

I saw a tutorial recently by Helping Develop where they create a slider script with jQuery and JS. The code really reminded me of a class element in Ruby using the $(document).ready(function() block as an initialize.

My initial attempt at this project is an emulation of what I saw and what I've experienced with Ruby. However, it didn't turn out as expected and I'd like to get some feedback on what I've written so far.

Anyways, all constructive criticism welcome. Is it ok to think of the jQuery ready block as a similar function to an initialize method in Ruby? Any no-no's you see here that I should avoid in the future? Any helpful nudges in the right direction please? :)

Edit: I think I've caught an error with my and creations. Will edit once testing it out.

Edit2: Ok, my other attempt didn't work out. :( still seeking help

Answer 1

you can do this with

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

But please don't, this is a terrible practice and there are much easier ways to handle dynamic content in pages, I'd highly recommend you to learn knockout.js if you want to handle this type of thing properly, and I find it's tutorial to be particularly good compared to most other tools so it's not too much of a hassle to go through it

Answer 2

You should change the function fillGrid to this.

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

Check plunker here .

Note: I have added sample text test so that you can see the table.