Jquery Dynamic table create?

Question

How to create Dynamic table using JQuery I created with .append but problem is when i am clicking on again so create anther table but i want add in to a same table so how can i do that please help me.

$(function () {
    $("#addProduct").click(function () {
        var table = $('<table></table>').addClass('foo');
        for (i = 0; i < 10; i++) {
            var row = $('<tr></tr>');
            for (i = 0; i < 10; i++) {
                var row1 = $('<td></td>').addClass('bar').text('result ' + i);
                table.append(row);
                row.append(row1);
            }
        }
        $('#someContainer').append(table);
    });
});

This is HTML

<button id="addProduct">Add Product</button>

<div id="someContainer"></div>

so meaning do you want to add row?dynamic adding of row in the table? — Olrac
– Olrac, Commented Jul 3, 2013 at 5:29
you can only mark 1 ans as mark as correct :) currently you are switching the mark :D on others you can vote up if you like their answers — muneebShabbir
– muneebShabbir, Commented Jul 3, 2013 at 5:51

lxg · Accepted Answer · 2014-10-25 12:38:49Z

10

Try my answer

$(function () {
    $("#addProduct").click(function () {
          var table = $('<table></table>').addClass('foo');
        for (var i = 0; i < 10; i++) {
                row = $('<tr></tr>');
                for (var j = 0; j < 10; j++) {
                    var rowData = $('<td></td>').addClass('bar').text('result ' + j);
                    row.append(rowData);
                }
                table.append(row);
            }

        if ($('table').length) {
             $("#someContainer tr:first").after(row);
        }
        else {
            $('#someContainer').append(table);
        }
    });
});

edited Oct 25, 2014 at 12:38

lxg

13.2k13 gold badges56 silver badges81 bronze badges

answered Jul 3, 2013 at 5:38

Olrac

1,5372 gold badges10 silver badges22 bronze badges

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

3 Comments

user2424382 Over a year ago

Thanks a Lot you Save me thankssssssssssss its working fine.

I. J. Kennedy Over a year ago

The fiddle seems to be gone.

USer22999299 Over a year ago

you for got to change the i to j for the nested loop.

IT ppl · Accepted Answer · 2013-07-03 05:42:20Z

try this

$(function() {  
    $("#addProduct").click(function() {
        if($('#someContainer table').length > 0)
        {
            var row = $('<tr></tr>');
            for(i=0; i<10; i++){
                var row1 = $('<td></td>').addClass('bar').text('result ' + i);
                row.append(row1);
            }
            $('#someContainer table').append(row);
        }
        else
        {
            var table = $('<table></table>').addClass('foo');
            for(i=0; i<10; i++){
                var row = $('<tr></tr>');
                for(i=0; i<10; i++){
                    var row1 = $('<td></td>').addClass('bar').text('result ' + i);
                    table.append(row);
                    row.append(row1);
                }
            }
            $('#someContainer').append(table);
        }
    });
});

live demo here.

Praveen · Accepted Answer · 2013-07-03 05:32:50Z

If you want to execute it for only once try using .one() in jQuery.

$(function () {
    $("#addProduct").one("click", function () {

        var table = $('<table></table>').addClass('foo');
        for (i = 0; i < 10; i++) {
            var row = $('<tr></tr>');
            for (i = 0; i < 10; i++) {
                var row1 = $('<td></td>').addClass('bar').text('result ' + i);
                table.append(row);
                row.append(row1);
            }
        }
        $('#someContainer').append(table);
    });
});

Check JSFiddle.

No I just want table repeat only 1 time and row or column is repeat whenever i click on the button

muneebShabbir · Accepted Answer · 2013-07-03 05:43:39Z

$(function () {
    $("#addProduct").click(function () {
    var table
    if($('#someContainer').find("table").length > 0){
          table =$('#someContainer').find("table");
    }else{
          table = $('<table></table>').addClass('foo');
    }

        for (i = 0; i < 10; i++) {
            var row = $('<tr></tr>');
            for (i = 0; i < 10; i++) {
                var row1 = $('<td></td>').addClass('bar').text('result ' + i);
                table.append(row);
                row.append(row1);
            }
        }
        $('#someContainer').append(table);
    });
});

try this one DEMO

ryosuke-hujisawa · Accepted Answer · 2018-04-08 06:23:13Z

<html>
 <head>
  </head>
   <body>
    <table id="game_table" border="1"></table>
     <script language="JavaScript">

gt = document.getElementById('game_table'),
 i = 0, 
  frag = document.createDocumentFragment(),
   tr = document.createElement('tr'),
    td = document.createElement('td');

while (i<10) {
 var _tr = tr.cloneNode(),
  j = 0;
   while (j<10) {
    _tr.appendChild(td.cloneNode());
     var min = 1 ;
      var max = 3 ;
       var a = Math.floor( Math.random() * (max + 1 - min) ) + min ;

var temp = document.createElement('div');
 temp.innerHTML = "str";
  _tr.appendChild(temp.firstChild);
    j++;
     }

frag.appendChild(_tr);
 i++;
  }
   gt.appendChild(frag);

  </script>
 </body>
</html>

Omar · Accepted Answer · 2020-05-12 03:37:22Z

based on @Olrac's answer

var tableBody = $('<table></table>').append($("<tbody>"));
$.each(dbRecords,function(index,record){
  row = $('<tr></tr>');
  $.each(record,function(i,cellValue){
    var rowData = $('<td></td>').text(cellValue);
    row.append(rowData);
  });
  tableBody.append(row);
});

$('#contentDiv').append(tableBody);

this worked very nice

output

<table>
  <tbody>
    <tr>
      <td>name</td>
      <td>age</td>
      <td>email</td>
      <td>data</td>
    </tr>
    <tr>
      <td>omar</td>
      <td>26</td>
      <td>[email protected]</td>
      <td>123</td>
    </tr>
    <tr>
      <td>ali</td>
      <td>22</td>
      <td>[email protected]</td>
      <td>456</td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

Jquery Dynamic table create?

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Related