How to edit the records in salesforce lightning

Component
-------------
<aura:component implements="force:appHostable,
                flexipage:availableForAllPageTypes,
flexipage:availableForRecordHome,
force:hasRecordId,
forceCommunity:availableForAllPageTypes"
                access="global"
                controller="AccountCtrl">
<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
        <aura:attribute name="Acclist"  type="list"/>
          <div>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
              <thead>
                <tr class="slds-line-height_reset">
                   <th class="slds-text-title_caps" scope="col">
                      <div class="slds-truncate" title="AccountId">Accoount Id</div>
                    </th>
             <th class="slds-text-title_caps" scope="col">
                  <div class="slds-truncate" title="Account Name">Account Name</div>
                    </th>
               <th class="slds-text-title_caps" scope="col">
                      <div class="slds-truncate" title="Account Site">Account Site</div>
                   </th>
             <th class="slds-text-title_caps" scope="col">
                      <div class="slds-truncate" title="Account Number">Account Number</div>
                    </th>
                 <th class="slds-text-title_caps" scope="col">
                          <div class="slds-truncate" title="Edit">Edit</div>
                       </th>
          </tr>
         </thead>
        <tbody>
               <aura:iteration items="{!v.Acclist}" var="item" >
                <tr class="slds-hint-parent">
                     <th data-label="Opportunity Name" scope="row">
                        <div class="slds-truncate" title="Id"><a href="javascript:void(0);" tabindex="-1">{!item.Id}</a></div>
                    </th>
        <td data-label="Account Name">
                       <div class="slds-truncate" title="{!item.Name}">{!item.Name}</div>
                    </td>
               <td data-label="Account Site">
                      <div class="slds-truncate" title="{!item.Site}">{!item.Site}</div>
                   </td>
               <td data-label="Account Number">
                      <div class="slds-truncate" title="{!item.AccountNumber}">{!item.AccountNumber}</div>
                   </td>
       <td data-label="icon" class="slds-col slds-size_1-of-12" onclick="{!c.edit}" id="{!item.Id}">
                        <lightning:icon iconName="utility:edit" size="small" />
                    </td>


                </tr>
            </aura:iteration>
        </tbody>
        </table>
    </div>
</aura:component>


Controller
----------
({
 doinit: function(component) {
    var action = component.get('c.getAccountData');
    var self = this;
   action.setCallback(this, function(actionResult) {
  component.set('v.Acclist', actionResult.getReturnValue());
    });
   $A.enqueueAction(action);
 },

    edit : function(component, event, helper) {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
            "recordId": event.target.id
        });
        editRecordEvent.fire();
    }
     

})

Apex class
-----------
public with sharing class AccountCtrl { 
    @AuraEnabled
    public static List<Account> getAccountData(){
        return [select Id,Name,Site,AccountNumber from Account LIMIT 5 ];
}
}


Note:This code will not support in Lightning application.You need to create  the lightning component tab
----