How to edit table in jquery

    <script type="text/javascript">
        $(function () {
            //Remove the dummy row if data present.
            if ($("#datatable_responsive tr").length > 2) {
                $("#datatable_responsive tr:eq(1)").remove();
            } else {
                var row = $("#datatable_responsive tr:last-child");
                row.find(".Edit").hide();
                row.find(".Delete").hide();
                row.find("span").html('&nbsp;');
            }
        });
 
        function AppendRow(row, ID, title, description) {
            //Bind ID.
            $(".ID", row).find("span").html(ID);
 
            //Bind title.
            $(".title", row).find("span").html(title);
            $(".title", row).find("input").val(title);
 
            //Bind description.
            $(".description", row).find("span").html(description);
            $(".description", row).find("input").val(description);
 
            row.find(".Edit").show();
            row.find(".Delete").show();
            $("#datatable_responsive").append(row);
        };
 
        //Add event handler.
        $("Body").on("click", "#btnAdd", function () {
            var txt_title = $("#txt_title");
            var txt_description = $("#txt_description");
            if (document.getElementById('txt_title').value == '' || document.getElementById('txt_description').value === '') {
                alert("fill.");
            }
            else {
                $.ajax({
                    type: "POST",
                    url: URL_BACE +url,

                    data: '{typeName: "' + txt_title.val() + '", description: "' + txt_description.val() + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var row = $("#datatable_responsive tr:last-child");
                        if ($("#datatable_responsive tr:last-child span").eq(0).html() != "&nbsp;") {
                            row = row.clone();
                        }
                        AppendRow(row, r.ID, r.title, r.description);
                        txt_title.val("");
                        txt_description.val("");
                        Bind_Info();
                    }
                });
            }
        });
 
        //Edit event handler.
          $("Body").on("click", "#datatable_responsive .Edit", function () {
        

            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    $(this).find("input").show();
                    $(this).find("span").hide();
                }
            });
            row.find(".Update").show();
            row.find(".Cancel").show();
            row.find(".Delete").hide();
            $(this).hide();
        });
 
        //Update event handler.
          $("Body").on("click", "#datatable_responsive .Update", function () {
              var id_row = $(this).attr("id_row");
             
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    var span = $(this).find("span");
                    var input = $(this).find("input");
                    span.html(input.val());
                    span.show();
                    input.hide();
                }
            });
            row.find(".Edit").show();
            row.find(".Delete").show();
            row.find(".Cancel").hide();
            $(this).hide();

            var ID = row.find("span").html();
            var typeName = $("#title_input_" + id_row ).val()
            var description = $("#description_input_" + id_row).val()

          
            var ReportType = {
                ID: ID,
                typeName: typeName,
                description: description
            };
    
            console.clear();
            window.bb = ReportType;
            console.log(ReportType);

                $.ajax({
                type: "PUT",
                url: URL_BACE + url + ID,
                data: JSON.stringify(ReportType),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data, textStatus, xhr) {
                  
                          <%-- Select Table --%>
                        Bind_Info();
                },
                error: function (xhr, textStatus, errorThrown) {
                    //alert(xhr.status);
                    //alert(xhr.responseText);
                }
            });
        });
 
        //Cancel event handler.
        $("Body").on("click", "#datatable_responsive .Cancel", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    var span = $(this).find("span");
                    var input = $(this).find("input");
                    input.val(span.html());
                    span.show();
                    input.hide();
                }
            });
            row.find(".Edit").show();
            row.find(".Delete").show();
            row.find(".Update").hide();
            $(this).hide();
        });
 
        //Delete event handler.
        $("Body").on("click", "#datatable_responsive .Delete", function () {
            if (confirm("do you want delete?")) {
                var row = $(this).closest("tr");
                var ID = row.find("span").html();
                $.ajax({
                    type: "Delete",
                    url: URL_BACE +url + ID,
                   
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        Bind_Info();
                       
                    }
                });
            }
        });
    </script>