Adding table rows and column dynamically with jQuery

Question

I'm trying to add rows and columns to a table using user input values to determine the number of rows and columns dynamically using jQuery. Below is my code which actually adds rows and columns but not according to the user's inputs

function makeGrid() {
let numOfRow = 0; let numOfCol = 0;

$('#submit').on('click', function() {

    numOfRow = $('#height').val();
    numOfCol = $('#width').val();

    for (var i = 1; i <= numOfRow; i++) {
        let row = $('.grid-canvas').append('<tr>');
        for (col = 1; col <= numOfCol; col++) {
            $('tr').append('<td></td>');
        }
    }
}); 
}

makeGrid();

Assuming a user inputs numOfRow = 2 and numOfCol = 2, I should have a table like this

<tbody class="grid-canvas">
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>

Problem is my code seems to be adding extra but I haven't been able to figure it out. This is the result of my code

<tbody class="grid-canvas">
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
</tbody>

How do I fix my code?

vikscool · Accepted Answer · 2018-05-23 05:10:44Z

4

try changing your code from:

$('#submit').on('click', function() {

numOfRow = $('#height').val();
numOfCol = $('#width').val();

for (var i = 1; i <= numOfRow; i++) {
    let row = $('.grid-canvas').append('<tr>');
    for (col = 1; col <= numOfCol; col++) {
        $('tr').append('<td></td>');
    }
}
});

into this

$('#submit').on('click', function() {

numOfRow = $('#height').val();
numOfCol = $('#width').val();
var body = $('.grid-canvas');
for (var i = 1; i <= numOfRow; i++) {
  let row = $('<tr></tr>');
  for (col = 1; col <= numOfCol; col++) {
    row.append('<td></td>');
  }
  body.append(row);
}
});

what i have done in the above code is created a separate object for the table's body and then once my rows are created with the columns, I append them back to the table object.

answered May 23, 2018 at 5:10

vikscool

1,3131 gold badge11 silver badges26 bronze badges

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

1 Comment

MD40 Over a year ago

This answer was helpful to learn that adding tables, tr, td dynamically with jquery.

Saeed · Accepted Answer · 2018-05-23 05:07:17Z

Pure javascript code is here

function f(x, y) {
  var rows = x,
    rowButtonNumber = y;

  var table = document.getElementById("myTable");
  table.innerHTML = "";

  for (var i = 0; i < rows; i++) {
    var tr = document.createElement("tr");
    table.appendChild(tr);
    for (var j = 0; j < rowButtonNumber; j++) {
      var td = document.createElement("td");
      var btn = document.createElement("button");
      btn.innerHTML = "btn " + (i + 1);
      btn.id = "btn-" + i;
      btn.onclick = function() {
        alert(this.innerHTML);
      };
      td.appendChild(btn);
      tr.appendChild(td);
    }
  }
}

function go() {
  var row = document.getElementById("row").value;
  var col = document.getElementById("col").value;
  f(row, col);
}

<html>

<head>
  <style>
    td {
      width: 200px;
      height: 200px;
    }
    
    button {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  Rows
  <input id="row" type="number" placeholder="Rows" />
  <br> Columns
  <input id="col" type="number" placeholder="Columns" />
  <button onclick="go()">Go</button>

  <table id="myTable" cellspacing="50">

  </table>

</body>

Miroslaw Opoka · Accepted Answer · 2018-05-23 05:00:44Z

-1

It does not seem you are using the row variable. I would suggest appending newly created td to row instead of $('tr').

answered May 23, 2018 at 5:00

Miroslaw Opoka

1192 silver badges6 bronze badges

2 Comments

Mena Over a year ago

Appending <td> to row will not create <tr> so that wouldn't create the table structure. How do you mean I'm not using the row variable?

Miroslaw Opoka Over a year ago

I meant using row.append(....) instead of $('tr').append - just as vikscool answered you above.

Collectives™ on Stack Overflow

Adding table rows and column dynamically with jQuery

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related