Создана динамическая таблица Jquery?

Question

Как создать динамическую таблицу с помощью JQuery Я создал с .append, но проблема в том, что когда я нажимаю на нее снова, создайте другую таблицу, но я хочу добавить ее в ту же таблицу, чтобы как я могу это сделать, пожалуйста, помогите мне.

$(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); 
    }); 
}); 

Это HTML

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

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

Answer 1

Попробуйте мой ответ

$(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); 
     } 
    }); 
}); 

Answer 2

Если вы хотите, чтобы выполнить его только один раз попробовать использовать .one() в 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); 
    }); 
}); 

Проверка JSFiddle.

Answer 3

попробовать этот

$(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 здесь.

Answer 4

$(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); 
    }); 
}); 

попробовать это один DEMO