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 tdlttable class34mytbl34 id34tblkitledger34 cellspacing34034 gt ltthead gt lttrgt ltthgtPART NOltthgt ltthgtPART NAMEltthgt ltth class34tblcol334gtQTYltthgt ltthgtltthgt lttrgt lttr34gt

In the table cell add both label and TextBoxInitially set the TextBox visible property to noneWhen click on the cell show the TextBox set the visible property to block and hide the Label visible property to noneOnce your task completed reverse the processRefer below sampleHTMLltstyle type34textcss34gt editable padding 2px editablehover cursor pointer backgroundcolor D9EDF8 ltstylegtltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgtltscript type34textjavascript34gt function 34editable34eachfunction var label thisfind39span39 labelafter34ltinput type 39text39 style 39displaynone39 gt34 var textbox thisfind39span39next var id thisidsplit3939thisidsplit39

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

SajidHus...

SOLVED CLOSED ACTIVE ANSWERED
User: SajidHussa
Posted: on Jan 01, 2022 12:53 AM
Forum: ASP.Net AJAX
Answer: 1
Views: 7499

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

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jan 01, 2022 05:30 AM
Modified: on Jan 03, 2022 09:39 AM
Report

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.

<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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

HTML

Company

Explore

Follow us

Contact Us