Convert HTML table Cell (TD) into Input TextBox in ASP.Net using jQuery Ajax

SajidHussa
 
on Jan 01, 2022 12:53 AM
723 Views

In Details 

i have bind HTML table dynamic i want when user click on td it convert into input textbox and on leave again it convert in td.

<table class="mytbl" id="tblkitledger"  cellspacing="0" >
    <thead >
        <tr>
            <th>PART NO</th>
            <th>PART NAME</th>
            <th class="tblcol3">QTY</th>
            <th></th>            
        </tr>
        <tr">
            <td>
                <input type="text" class="mytxtbox" id="txtpartno" tabindex="3" /> 
            </td>
             <td>
                <input type="text" class="mytxtbox" id="txtpartname" tabindex="4" /> 
             </td>
            <td class="tblcol3">
                <input type="text" class="mytxtbox rightpager" id="txtqty" tabindex="5" onblur="AddKitLedger()" onkeypress="return isNumberKey(event)" />
            </td>                                                    
            <td></td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

i bind this table using ajax

//Edit Records
function EditRecord(kitid)
{
    $("input:text").val("");
    $("#tblkitledger tbody").empty();
    document.querySelector('#btnsavepopup').innerHTML = "UPDATE";
    $.ajax({
        type: "POST",
        url: "addkit.aspx/getRecords",
        data: JSON.stringify({ kitid : kitid }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response)
        {
            var rws = "";
            var data = JSON.parse(response.d);
            $("#hfkid").val(data[0].kid);
            $("#txtkitno").val(data[0].kitno);
            $("#txtkit").val(data[0].kitname); 
            for (var i = 0; i <= data.length - 1; i++)
            {                 
                rws += "<tr>"
                rws += "<td class='notshow'>"+ data[i].klid +"</td>";
                rws += "<td>" + data[i].partno + "</td>";
                rws += "<td>" + data[i].partname + "</td>";
                rws += "<td class='tblrightalign '>" + data[i].qty + "</td>";
                rws += "<td><input type='button' name='record' value='X' class='btn-danger' onclick=delerow(this)></td>";
                rws += "</tr>";                
            }
            $('#tblkitledger tbody').append(rws); 
        },
        failure: function (response)
        {
            alert(response.d);
        },
        complete: function ()
        {            
            $('#fullscreenitem').modal('show'); 
        },
        error: function (response) {
            alert(response.d);
        }
    });
}

thank you

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jan 01, 2022 05:30 AM
on Jan 03, 2022 09:39 AM

In the table cell add both label and TextBox.

Initially set the TextBox visible property to none.

When click on the cell show the TextBox (set the visible property to block) and hide the Label (visible property to none).

Once your task completed reverse the process.

Refer below sample.

HTML

<style type="text/css">
    .editable {
        padding: 2px;
    }

    .editable:hover {
        cursor: pointer;
        background-color: #D9EDF8;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".editable").each(function () {
            var label = $(this).find('span');
            label.after("<input type = 'text' style = 'display:none' />");
            var textbox = $(this).find('span').next();
            var id = this.id.split('_')[this.id.split('_').length - 1];
            textbox[0].name = id.replace("lbl", "txt");
            textbox.val(label.html());
            label.click(function () {
                $(this).hide();
                $(this).next().show();
            });

            textbox.focusout(function () {
                $(this).hide();
                $(this).prev().html($(this).val());
                $(this).prev().show();
            });
        });
    });
</script>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>Name:&nbsp;</td>
        <td class="editable">
            <span id="lblName">Mudassar</span>
        </td>
    </tr>
    <tr>
        <td>Country:&nbsp;</td>
        <td class="editable">
            <span id="lblCountry">India</span>
        </td>
    </tr>
</table>

Demo