jQuery, adding multiple table rows is not working correctly

Question

The idea is to build a function that takes an input and uses that to build a grid. I'm trying to establish the grid functionality first, and I'm having a peculiar error. I searched for a few hours, but the answers all tell me that a simple "append" should be working.

The specific error that I am getting: When I load up the webpage, it is only adding one table row to the tbody, and only one table data to that table row. The idea is instead to create a grid of 16 x 16, with 16 rows and 16 data. Console logs show that the loops are all working correctly.

The html is just a basic file that imports the javascript correctly (All tested) with a simple: div class="container" /div

Code:

  $(document).ready(function(){
  $(".container").html("");
  /*this function makes a table of size numRow and
  num data. it then gives each data element
  */
  //blank rows to insert
  var blankResults = $("<table>");
  var result = blankResults;
  var row = $("<tr/>");
  var data = $("<td/>");

  function makeTable(num) 
  {
    result = blankResults;
        //create num rows
    for (var i = 0; i < num; i++)
    {
      //for each row
      //add data num times
      for (var j = 0; j < num; j++)
      {
        console.log(j);
        row.append(data);
      }
      //append row
      console.log(i);
      result.append(row);
    }
  }
  //starting area
  makeTable(16);
  $(".container").append(result);
  //Start with 16 by 16 of square divs - 
  //put inside a container div
});

you are not closing the tr and td tag after creating rows and columnss. thats why you are getting only one row with colum. In the inner for loop close td and in outer for loop close tr. That should solve your problem. — Waqar
– Waqar, Commented Jun 7, 2015 at 9:16

Tharindu Kumara · Accepted Answer · 2015-06-07 09:26:35Z

2

Try this code.

$(document).ready(function(){
    $(".container").html("");
    /*this function makes a table of size numRow and
          num data. it then gives each data element
          */
    function makeTable(num) 
    {
        var output = '<table>';
        //create num rows
        for (var i = 0; i < num; i++)
        {
            //for each row
            output+= '<tr>'
            for (var j = 0; j < num; j++)
            {
                output += '<td></td>';
            }
            output += '</tr>';

        }
        output += '</table>';
        return output;
    }
    //starting area
    var result = makeTable(16);
    $(".container").append(result);
    //Start with 16 by 16 of square divs - 
    //put inside a container div
 });

answered Jun 7, 2015 at 9:26

Tharindu Kumara

4,4882 gold badges31 silver badges46 bronze badges

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

1 Comment

JapanRob Over a year ago

This was precisely what I needed. The other answers were great as well, but this one really clicked for me. Thank you, it was really helpful.

Community · Accepted Answer · 2020-06-20 09:12:55Z

You are appending to the same variables all the time...row and 'data`. you should not do that.

As you can see from the code below, you need to create the var row = $("<tr>"); on each loop, to reference it when you append the <td> (table cell) to that newly created row.

Modifed to use only one loop:

$(document).ready(function(){
  function makeTable(num) {
    var table = $("<table>"), row;
    
    for (var i = 0; i < num; i++){
      row = $("<tr>");
      table.append(row);
      row.append(Array(num + 1).join("<td></td>"));
    }
    return table;
  }

  $(".container").html(makeTable(16));
});

DEMO PLAYGROUND

Of course, this is not a good way generating a table. running jQuery function on each loop is slow and bad practice. You should generate a big string which will represent your DOM structure and then append that string where needed and jQuery will make a DOM node out of it.

omikes · Accepted Answer · 2015-06-07 09:59:48Z

I made up my own html for this but it should be as simple as using two nested for loops grabbing values the size input. Here's what I came up with:

$("#tableMaker").click(function () {
    $('.container').html("");
    $('.container').append("<table></table>");
    for (var i = 0; i < $('#size').val(); i++) {
        $('table').append("<tr></tr>");
        for (var j = 0; j < $('#size').val(); j++) {
            $('tr:last').append("<td>Column " + (j+1) + ", Row " + (i+1) + "</td>");
        }
    }
})

td {
    border: black solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="size" placeholder="Size" />
<button id="tableMaker" type="button">Generate Table</button>
<br />
<div class="container">
    <div />

Collectives™ on Stack Overflow

jQuery, adding multiple table rows is not working correctly

3 Answers 3

1 Comment

Modifed to use only one loop:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Modifed to use only one loop:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related