Adding rows to a jquery grid with javascript

Question

So basically, i'm actually doing a web app with html/css/javascript and im pretty much a beginner in it (i'm a c++/c# guy). I have seen many kind of solution already, but they always use stuff not related with actual ui-grid. So far, I made my headers (which won't change) and now i'm looking for a way to add rows in the grid. So, here is my headers :

<div class="ui-grid-a" id="currentgrid" style="height: 38px">
            <div class="ui-block-a">
                <div class="ui-grid-b">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-e">Info1</div>
                    </div>
                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-e">Info2</div>
                    </div>
                    <div class="ui-block-c">
                        <div class="ui-bar ui-bar-e">Info3</div>
                    </div>
                </div>
            </div>
            <div class="ui-block-b">
                <div class="ui-grid-b">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-e">Info4</div>
                    </div>
                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-e">Info5</div>
                    </div>
                    <div class="ui-block-c">
                        <div class="ui-bar ui-bar-e">Info6</div>
                    </div>
                </div>
            </div>
        </div>

And here is how i will call the js function to add the rows i will need

<a href="#" class="custom-button-style" onclick="find()" id="find" name="find">Search</a>

For exemple, if i can choose the number of rows added by changing only the value of a number in a loop, that could be awesome.

Help me =(

Answer 1

You can loop and append HTML-elements in this way:

for(var i = 1; i <= 10; i++) {
        $('#currentgrid').append('<div class="ui-bar ui-bar-e">Info'+i+'</div>');
}