[SalesForce] Attribute Lightning Component

You can certainly create a sobject instance in client and pass as it as array from the component and retrieve it as List<sObject> in the controller.

If you want to pass a specific sObject type you, have to set the sobjectType.

For eg: sobjectType to Account

Here an simple example to do it.

TestApp:

<aura:application controller="AccountController" access="public">
    <aura:attribute name="accounts" type="List" access="private"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:iteration items="{!v.accounts}" var="acc">
        <ui:inputText value="{!acc.Name}"/><br/>
    </aura:iteration>

    <ui:button press="{!c.saveAcc}" label="Save"/>
</aura:application>

TestAppController.js

({
    doInit : function(cmp, event, helper) {
        var acc = [];

        for(var i = 0;i < 5;i++){
            //set sobjectType to Account, if account is passed
            acc.push({'sobjectType':'Account','Name':'Test'+i});
        }

        cmp.set("v.accounts",acc);

    },
    saveAcc : function(cmp, event, helper) {

        var action = cmp.get("c.insertAccounts");
        action.setParams({
            "acc":cmp.get("v.accounts")
        });

        actions.setCallback(this,function(resp){

            var state = resp.getState();

            if(state === 'SUCCESS'){
                console.log(resp.getReturnValue());
            }
            else if(state === 'ERROR'){
                var errors = resp.getError();
                for(var i = 0 ;i < errors.length;i++){
                    console.log(errors[i].message);
                }
            }

        });

        $A.enqueueAction(action);

    }
})

Apex Controller:

public with sharing class AccountController {

    //if sobject is specific for eg:Account,then you use List<Account> acc
    @AuraEnabled
    public static String insertAccounts(List<sObject> acc){
        try{
            insert acc;
            System.debug('acc'+acc);
            return 'success';
        }
        catch(DMLException ex){
           AuraHandledException e = new AuraHandledException(ex.getMessage());
           throw e;
        }
        return '';        
    }
}

Is it possible to achieve this without using JQuery?

Yes. If you can do something with JQuery, you can do it without JQuery. It's all JavaScript. As an addendum, anything you can do in JQuery you can do without JQuery and get better performance.

In the interest of keeping things brief, I'm not going to write out a full copy of your code with modifications, but a smaller, more generalized example that demonstrates how to do what you're trying to do.

<aura:application >
    <aura:attribute name="rows" type="Object[]" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <table>
        <tbody>
            <aura:iteration items="{!v.rows}" var="row" indexVar="rowIndex">
                <tr>
                    <td data-index="{!rowIndex}" onclick="{!c.toggle}">
                        {!row.Name}
                    </td>
                </tr>
                <aura:if isTrue="{!row.expanded}">
                    <aura:iteration items="{!row.children}" var="child">
                        <tr>
                            {!child.Name}
                        </tr>
                    </aura:iteration>
                </aura:if>
            </aura:iteration>
        </tbody>
    </table>
</aura:application>

({
    init: function(cmp, evt) {
        cmp.set("v.rows", [
            {Name: "A",
            expanded: false,
            children: [
            { Name: "A1" },
            { Name: "A2" }
            ]},
            {Name: "B",
            expanded: false,
            children: [
            { Name: "B1" },
            { Name: "B2" }
            ]},
            {Name: "C",
            expanded: false,
            children: [
            { Name: "C1" },
            { Name: "C2" }
            ]}
                ]);
    },
    toggle: function(cmp, evt) {
        var rows = cmp.get("v.rows");
        rows[evt.target.dataset.index].expanded = !rows[evt.target.dataset.index].expanded;
        cmp.set("v.rows", rows);
    }
})

As you can see from this code, it's a trivial matter to simply render the extra rows when the "expanded" attribute has been toggled. You should be able to modify this example to suit your needs.

I've purposefully left out all styling and fluff to get to the heart of the matter, which I think this app demonstrates easily. Most likely, you'll just need to add an "expanded" attribute to your data's information, and then toggle it as appropriate.

There's lots of other things you could do with this as well, such as querying the database, making a callout, or whatever else it is you want/need to do to get the data.