3

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>
5
  • row1 = $('<td></td>') that's not a good name
    – mishik
    Jul 3, 2013 at 5:28
  • can't understand what exactly you want? elaborate more.
    – jogesh_pi
    Jul 3, 2013 at 5:28
  • so meaning do you want to add row?dynamic adding of row in the table?
    – Olrac
    Jul 3, 2013 at 5:29
  • Yes i want to dynamic adding of row in the table? Jul 3, 2013 at 5:43
  • 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 Jul 3, 2013 at 5:51

6 Answers 6

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);
        }
    });
});
3
  • Thanks a Lot you Save me thankssssssssssss its working fine. Jul 3, 2013 at 5:45
  • 5
    The fiddle seems to be gone. Nov 6, 2013 at 16:14
  • you for got to change the i to j for the nested loop. Oct 25, 2014 at 12:14
2

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.

0
0

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.

1
  • No I just want table repeat only 1 time and row or column is repeat whenever i click on the button Jul 3, 2013 at 5:41
0
$(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

0
0
<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>
0

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>omar@gmail.com</td>
      <td>123</td>
    </tr>
    <tr>
      <td>ali</td>
      <td>22</td>
      <td>ali@gmail.com</td>
      <td>456</td>
    </tr>
  </tbody>
</table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.