jQuery user defined dynamic table

Question

How could I make a dynamic table when the number of rows (number of <tr> tags) and number of columns (number of <td> tags) are entered by the user?

I also need to make sure that each <td>tag has a unique id.

HTML:

I have a <div id=tabel> ... </div> in my html code where I need to insert this dynamic table.

Javascript:

var rows = content.rows, colums = content.columns, size = colums * rows, i;
$("tabel").append("<table>");

for (i = 0; i < size; i += 1) { 

// make table with dynamic <tr> and <td>

}

Pseudocode or snippets of code would help me a lot!

for (;r < rows;) {create TR to TABLE; for (;c < columns;) {create TD to TR}}. — Teemu
– Teemu, Commented May 10, 2016 at 16:47

Matt Coady · Accepted Answer · 2016-05-10 20:02:26Z

1

You'll need a nested for loop. Loop the rows then inside each row loop the columns:

https://jsfiddle.net/g80hzjgn/2/

var rows, cols, domRow, domCol, 
  table = $('#table'), 
  cellId = 0;

jQuery('#submit').click(function(){
  table.empty();
  rows = parseInt($('#row-input').val());
  cols = parseInt($('#col-input').val());

  for(var i = 0; i < rows; i++){
    domRow = $('<tr/>');
    for(var x = 0; x < cols; x++){
      domCol = $('<td/>',{
        'id': "cell-" + cellId++,
        'text': 'cell'
      });
      domRow.append(domCol);
    }
    table.append(domRow);
  }
});

edited May 10, 2016 at 20:02

answered May 10, 2016 at 17:38

Matt Coady

3,8967 gold badges44 silver badges64 bronze badges

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

3 Comments

Dries Coppens Over a year ago

Great! But I want to use jQuery selectors instead of doing it your way. @Matt Coady

Dries Coppens Over a year ago

Awesome! One last question: what if I want to insert images to the <td> tag? Image with <src=0.png> needs to be added to cell-0 and so on... If I want to do this in another function (so I could shuffle them) how would I approach this problem? @Matt Coady

Matt Coady Over a year ago

After domCol is created (but before it gets appended to domRow) make an image element and append it to domCol: $('<img/>', {'src':'0.png'}).appendTo(domCol) You'll also want to remove the 'text':'cell' bit I added (and the comma on the previous line).

Collectives™ on Stack Overflow

jQuery user defined dynamic table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related