Create Dynamic Table On Click

HTML

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

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

CSS

.foo{border: solid 1px #333; border-collapse: collapse;}
.bar{background: #9c9c9c;color:#333; padding: 5px 20px;}

JavaScript

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