Unable to print table grid using jQuery

Question

I am unable to print a grid. This is what I am trying to do:

1. Take the grid size as an input from the user.
2. Dynamically create the grid based on the input.

Below is a part of the code.

$(document).ready(function() {
    $("#grid-input").click(function() {
        $(".drawing-area").empty();

        var rows = $("#row").val();
        var cols = $("#col").val();
        if (rows > 0 && cols > 0) {
            for (var i = 1; i <= rows; i++) {
                var rowClassName = 'row' + i;
                $('<tr></tr>').addClass(rowClassName).appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

                for (var j = 1; j <= cols; j++) {
                    var colClassName = 'col' + j;
                    $('<td width="20px" height="20px" style="border: 1px solid #000"></td>').addClass(colClassName).appendTo('.rowClassName');
                }

            }
        } else {
            alert("You haven't provided the grid size!");
        }
    });
});
});

 <table class="drawing-area">
                        
  </table>

Answer 1

You can try to save the dynamic table row to a variable $tr first and then add the dynamic table column to that $tr variable like:

$("#grid-input").click(function() {
  $(".drawing-area").empty();

  var rows = $("#row").val();
  var cols = $("#col").val();
  if (rows > 0 && cols > 0) {
    for (var i = 1; i <= rows; i++) {
      var rowClassName = 'row' + i;
      
      // Saving dynamic table row variable
      var $tr = $('<tr/>').addClass(rowClassName).appendTo('.drawing-area'); 

      for (var j = 1; j <= cols; j++) {
        var colClassName = 'col' + j;
        $('<td>'+ (i * j) +'</td>').addClass(colClassName)
        
        // Append the new td to this $tr
        .appendTo($tr);
      }
    }
  } else {
    alert("You haven't provided the grid size!");
  }
});

.drawing-area{font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;border-collapse:collapse;width:100%}
.drawing-area td,.drawing-area th{border:1px solid #ddd;padding:8px}
.drawing-area tr:nth-child(even){background-color:#f2f2f2}
.drawing-area tr:hover{background-color:#ddd}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Row: <input type="number" id="row"><br/> 
Col: <input type="number" id="col"><br/>
<button id="grid-input">Save</button><br/><br/>
<table class="drawing-area">
</table>

Answer 2

There is an error in your code, Last brackets are not required.

Append dom at the end of your code,

Try following code

$(document).ready(function() {
    $("#grid-input").click(function() {
        $(".drawing-area").empty();

        var rows = $("#row").val();
        var cols = $("#col").val();
        if (rows > 0 && cols > 0) {
            for (var i = 1; i <= rows; i++) {
                var rowClassName = 'row' + i;
                var tr = $('<tr>').addClass(rowClassName);
                tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

                for (var j = 1; j <= cols; j++) {
                    var colClassName = 'col' + j;
                    $('<td width="20px" height="20px" style="border: 1px solid #000">').addClass(colClassName).appendTo(tr);
                }

            }
        } else {
            alert("You haven't provided the grid size!");
        }
    });
});