Creating html table using jquery and append

Question

I'm trying to create table based on size given by the user but as a result I get all cells in one row.

I've tried using loop inside loop. One creates trs while second creates tds

function createTable(size){
    for (var j=1; j<size+1; j++){
        $('table').append("<tr>");

        for (var i=1; i<size+1; i++){
            $('table').append('<td><input class="add"/></td>');

        }

        $('table').append("</tr>"); 
    }
}

I expected it to create multiple rows, not just one. When I open console log, all are stored in .

Answer 1

The issue is that $(selector).append('<tr>') is going to create a new DOMElement that is a TR, and append it. You are not appending HTML. You are appending DOM Nodes. So you either have to construct the whole HTML and append it, or create the nodes, and modify them before/after you append them.

In this case, simply generating the HTML and then appending it is fairly straight forward.

function createTable(size){
  var newRows = '';

  for (var j=1; j<size+1; j++){
    newRows += '<tr>';

    for (var i=1; i<size+1; i++){
      newRows += '<td><input class="add"/></td>';
    }

    newRows += "</tr>";
  }

  $('table').append(newRows);
}

Answer 2

Make sure you add new <td> cells to <tr> elements of the table, rather than adding <td> cells to the <table> directly as you are currently doing.

Consider the following changes to resolve your problem:

1. create a new current "row" element as a first step of your outer loop
2. during your inner loop, append <td> elements to the current row
3. append the current "row" to the table itself

This can be expressed in code as:

 function createTable(size) { for (var j = 1; j < size + 1; j++) { /* Create new row */ const row = $("<tr>"); for (var i = 1; i < size + 1; i++) { /* Append td cell to current row */ row.append('<td><input class="add"/></td>'); } /* Add newly created row to table */ $('table').append(row); } } createTable(10); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table></table> 

Answer 3

If you store a tr as a dom object in a variable, you can append it to the table and then append to the stored tr dom object.

 $(document).ready(function() { function createTable(size){ for (var j=1; j<size+1; j++){ var tr = $("<tr>"); $('table').append(tr); for (var i=1; i<size+1; i++){ tr.append('<td><input class="add"/></td>'); } } } createTable(5); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table></table> 

On a side note, you could control the amount of tr's and td's if you pass an array to the function.

 $(document).ready(function() { function createTable(size){ for (var j=1; j<size[0]+1; j++){ var tr = $("<tr>"); $('table').append(tr); for (var i=1; i<size[1]+1; i++){ tr.append('<td><input class="add"/></td>'); } } } createTable([3,5]); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table></table>