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 =(

@MacGruber, you may not want to nest classes this way. You have a class ui-block-a nested inside another ui-block-a — Matt O'Connell
– Matt O'Connell, Commented Sep 17, 2015 at 18:44
Stack Overflow is not a code writing website. We will not implement features for you. Please make an attempt at implementing the solution on your own, and if you get stuck post a question with a reproducible problem. At that point your question will be well received. In its current form, this post is simply asking for someone else to do your work for you. — Travis J
– Travis J, Commented Sep 17, 2015 at 18:45

Sim · Accepted Answer · 2015-09-17 18:47:41Z

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>');
}

answered Sep 17, 2015 at 18:47

Sim

3,3171 gold badge20 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Adding rows to a jquery grid with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related