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

I would recommend doing this in a template based framework like knockoutJS, AngularJS or similar. Dynamic html via javascript/jquery is not a very maintainable pattern. — TGH
– TGH, Commented May 14, 2015 at 1:56
knockout has a very good tutorial and can be learnt in a reasonably beginner level learn.knockoutjs.com — Eduardo Wada
– Eduardo Wada, Commented May 14, 2015 at 2:01
I will definitely checkout AngularJS and maybe knockoutJS in the near future, but I'd like to stick with just jQuery and JS for this problem. I'm doing this problem for learning purposes only. Thanks for the replies, bookmarked the link you gave Eduardo :) — philip yoo
– philip yoo, Commented May 14, 2015 at 2:05
As far as I know, Angular is better than knockoutJS (more capabilities), the only reason I usually recommend knockout is because I've gone through both of their pages and knockout was ridiculously fast to learn — Eduardo Wada
– Eduardo Wada, Commented May 14, 2015 at 2:19

CuriousMind · Accepted Answer · 2015-05-14 02:17:42Z

1

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.

answered May 14, 2015 at 2:17

CuriousMind

3,1833 gold badges31 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

philip yoo Over a year ago

Thank you for this answer! I have some questions about the solution though. How can we store var tr = $("<tr>"); the first time when we don't have any table rows initially made? Same with appending the table cells into the table row. // Also, using document.body, will this create a brand new table? If I wanted to edit an existing table, how can I go about doing that?

CuriousMind Over a year ago

Thats the magic of JQuery, the element need not be present in the document.

Eduardo Wada · Accepted Answer · 2015-05-14 02:16:37Z

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

answered May 14, 2015 at 2:16

Eduardo Wada

2,65622 silver badges35 bronze badges

2 Comments

philip yoo Over a year ago

Thank you Eduardo. Just curious, would knockout.js be a good precursor to learning angular.js?

Eduardo Wada Over a year ago

I Don't know because I quit web development while I was learning angular.js (switched to another company), but knockout made me understand a little bit about bindings and now I can't live without them in any UI framework I use.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related