Я хочу реализовать встроенное редактирование в моей таблице данных

Question

<input id="hdPlanMonthlyId" value="0" type="hidden" />
<link href="~/Content/css/ValidateEngineCSS/datatables.min.css" rel="stylesheet" />

<table class="table table-bordered table-striped" id="tblKPIdetailsgrid">
    <thead>
        <tr>
            <th>Plan Monthly ID</th>
            <th>K.P.I</th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
            <th>Total</th>
            <th>CY Forecast</th>
            <th>PY Actual</th>
            <th>Action</th>
        </tr>
    </thead>
</table>
<script src="~/Content/js/datatables.min.js"></script>
<script src="~/Scripts/jAlert/jAlert-v3.js"></script>
<script src="~/Scripts/jAlert/jAlert-functions.js"></script>
<script>
function BindPlanMonthlyGrid(msg) {

    if ($("#ValidateKPIdiv").validationEngine({ returnIsValid: true }) == false) {
        return false;
    }
    var oModel = {
        'PlanId': $("#PlansDropdown option:selected").val(),
        'LoggedInID': $('#loggId').val()


    };
    var result = AjaxCallGetWithParameter("User", "GetKPIGriddata", oModel, "GET", "Json");

    var properties = {
        bProcessing: true,
        bDestroy: true,
        bSort: true,
        pageLength: 50,
        data: result.responseJSON,
        aoColumns: [
            { "data": "PlanMonthlyID", "name": "PlanMonthlyID", "visible": false },
            { "data": "COAName", "name": "COAName" },
            { "data": "Jan", "name": "Jan" },
            { "data": "Feb", "name": "Feb" },
            { "data": "Mar", "name": "Mar" },
            { "data": "Apr", "name": "Apr" },
            { "data": "May", "name": "May" },
            { "data": "Jun", "name": "Jun" },
            { "data": "Jul", "name": "Jul" },
            { "data": "Aug", "name": "Aug" },
            { "data": "Sep", "name": "Sep" },
            { "data": "Oct", "name": "Oct" },
            { "data": "Nov", "name": "Nov" },
            { "data": "Decm", "name": "Decm" },
            { "data": "NYTotal", "name": "NYTotal" },
            { "data": "CYForecast", "name": "CYForecast" },
            { "data": "PYActual", "name": "PYActual" },



            {
                mData: "",
                bSortable: true,
                mRender: function (cellvalue, options, rowObject) {

                    return "<i class=\"fa fa-pencil-square-o\" aria-hidden=\"true\" name=\"id_'" + rowObject.PlanMonthlyID + "',planid_'" + rowObject.PlanID + "',coaname_'" + rowObject.COAName + "',jan_'" + rowObject.Jan + "',feb_'" + rowObject.Feb + "',mar_'" + rowObject.Mar + "',apr_'" + rowObject.Apr + "',may_'" + rowObject.May + "',jun_'" + rowObject.Jun + "',jul_'" + rowObject.Jul + "',aug_'" + rowObject.Aug + "',sep_'" + rowObject.Sep + "',oct_'" + rowObject.Oct + "',nov_'" + rowObject.Nov + "',dec_'" + rowObject.Decm + "',total_'" + rowObject.NYTotal + "',cyforecast_'" + rowObject.CYForecast + "',pyactual_'" + rowObject.PYActual + "'\"   title=\"Update\"  onclick=\"UpdatePlanMonthly('" + rowObject.PlanMonthlyID + "','" + rowObject.PlanID + "','" + rowObject.COAName + "','" + rowObject.Jan + "','" + rowObject.Feb + "','" + rowObject.Mar + "','" + rowObject.Apr + "','" + rowObject.May + "','" + rowObject.Jun + "','" + rowObject.Jul + "','" + rowObject.Aug + "','" + rowObject.Sep + "','" + rowObject.Oct + "','" + rowObject.Nov + "','" + rowObject.Decm + "','" + rowObject.NYTotal + "','" + rowObject.CYForecast + "','" + rowObject.PYActual + "');\"></i><i class=\"fa fa-times-circle red_icon\" aria-hidden=\"true\" name=\"id_'" + rowObject.PlanMonthlyID + ",planid_'" + rowObject.PlanID + "'\"   title=\"Delete\"  onclick=\"DeletePlanMonthly('" + rowObject.PlanMonthlyID + "','" + rowObject.PlanID + "');\"></i>";
                }
            }
        ]
    };
    var table = $('#tblKPIdetailsgrid').DataTable(properties);
    $('#tblKPIdetailsgrid').on('click', 'tbody tr', function () {
        debugger;
        table.row(this).edit();

    });

}


</script>

Выше приведен код, который я использую, но дело в том, что я не могу выполнять встроенное редактирование данных. Я хочу, чтобы, когда пользователь нажимал на значок «Редактировать», текстовое поле появлялось автоматически, и пользователь мог публиковать редактируемое значение из текстового поля на контроллере. Пожалуйста, предложите что-нибудь полезное, что поможет мне.