how to edit and update gridview cell using java script?

Question

i have a gridview and display the data using datatable without data base..
now qus is if i click on any cell how to edit and update the data in a data table using Java script..
dont use any button..

aspx page--

<div style="text-align: center; background-color: Silver; width: 100%">
        <h3>
            GridView</h3>
        <asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="White"
            Font-Bold="true" Width="100%" class="gv">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" />
                <asp:BoundField DataField="Name" HeaderText="Name" />
                <asp:BoundField DataField="City" HeaderText="City" />
            </Columns>
        </asp:GridView>
    </div>

cs page///

protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("City") });
              
                dt.Rows.Add(2, "Sunny", "Chennai");
                dt.Rows.Add(3, "Monika", "Bangalore");
                dt.Rows.Add(4, "Jyoti", "Chennai");
                dt.Rows.Add(5, "Radhika", "Jabalpur");
                dt.Rows.Add(6, "Imran", "Jammu");
                dt.Rows.Add(7, "Alok", "Delhi");
                dt.Rows.Add(8, "Amit", "Shamshabad");
                dt.Rows.Add(9, "Neetu", "Bhopal");
                dt.Rows.Add(10, "Jyoti", "Chennai");
                dt.Rows.Add(11, "Radhika", "Vidisha");
                dt.Rows.Add(10, "Pooja", "Pune");
                dt.Rows.Add(12, "Rutela Singh", "Mumbai");

                gridview1.DataSource = dt;
                gridview1.DataBind();
            }
        }