make editable html td cell and fire event to capure row records

<table id="tblproduct" class="tblwidth">
    <tr>
        <th class="col1">SN</th>
        <th class="notshow">pid</th>
        <th class="col12">Product Name</th>
        <th class="col10">MRP</th>
        <th class="col10">Disc %</th>
        <th class="notshow">Dis.Amt</th>
        <th class="col10">Sale Rate</th>
        <th class="col10">GST %</th>
        <th class="notshow">GST Amt</th>
        <th class="col10">Net Amt</th>
        <th class="col9"></th>
        <th class="col10"></th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
</table>

function GetProductList(pageIndex, searchTerm, sortDirection, sortColumn,brand,flawer,group) {
          var obj = {};
          obj.pageIndex = $.trim(pageIndex);
          obj.searchTerm = $.trim(searchTerm);
          obj.sortDirection = $.trim(sortDirection);
          obj.sortColumn = $.trim(sortColumn);
          obj.brand = brand;
          obj.flawer = flawer;
          obj.group = group;
          $.ajax({
              type: "POST",
              url: "ProductList.aspx/GetProductList",
              data: JSON.stringify(obj),
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: OnSuccess,
              failure: function (response) {
                  alert(response.d);
              },
              error: function (response) {
                  alert(response.d);
              }
          });
      }
 
      var row;
      function OnSuccess(response) {
          var xmlDoc = $.parseXML(response.d);
          var xml = $(xmlDoc);
          var product = xml.find("product");
          if (row == null) {
              row = $("[id*=tblproduct] tr:last-child").clone(true);
          }
          $("[id*=tblproduct] tr").not($("[id*=tblproduct] tr:first-child")).remove();
          if (product.length > 0) {
              $.each(product, function () {
                  var customer = $(this);
                  $("td", row).eq(0).html($(this).find("RowNumber").text()).addClass("col1");
                  $("td", row).eq(1).html($(this).find("pid").text()).addClass("notshow");
                  $("td", row).eq(2).html($(this).find("pname").text());
                  $("td", row).eq(3).html($(this).find("mrp").text()).prop("contenteditable='true' onchange='getvalue()'");
                  $("td", row).eq(4).html($(this).find("discper").text());
                  $("td", row).eq(5).html($(this).find("discamt").text()).addClass("notshow");
                  $("td", row).eq(6).html($(this).find("srate").text());
                  $("td", row).eq(7).html($(this).find("gstper").text());
                  $("td", row).eq(8).html($(this).find("gstamt").text()).addClass("notshow");
                  $("td", row).eq(9).html($(this).find("netamount").text());                   
                  $("td", row).eq(10).html('<input id="Button1" type="button" value="Edit" onclick="Editvalues()" class="coledit"/>');
                  $("td", row).eq(11).html('<input id="Button1" type="button" value="Del" onclick="DeleteRecord()" class="coldel"/>');
 
 
                  $("[id*=tblproduct]").append(row);
                  row = $("[id*=tblproduct] tr:last-child").clone(true);
              });
 
              var pager = xml.find("Pager");
              $(".Pager").ASPSnippets_Pager({
                  ActiveCssClass: "current",
                  PagerCssClass: "pager",
                  PageIndex: parseInt(pager.find("PageIndex").text()),
                  PageSize: parseInt(pager.find("PageSize").text()),
                  RecordCount: parseInt(pager.find("RecordCount").text()),
 
              });
 
              $(".ContactName").each(function () {
                  var searchPattern = new RegExp('(' + SearchTerm() + ')', 'ig');
                  $(this).html($(this).text());
              });
          } else {
              var empty_row = row.clone(true);
              $("td:first-child", empty_row).attr("colspan", $("td", row).length);
              $("td:first-child", empty_row).attr("align", "center");
              $("td:first-child", empty_row).html("No records found for the search criteria.");
              $("td", empty_row).not($("td:first-child", empty_row)).remove();
              $("[id*=tblproduct]").append(empty_row);
          }
      };

i add this line  with td to make editable but td not become editable a also  fetach record data or tr to update database

.prop("contenteditable='true' onchange='getvalue()'");