Home/ Questions/Q 8355343
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T09:50:00+00:00

I am trying to change the table cell from ‘span’ type to ‘input’ on

  • 0

I am trying to change the table cell from ‘span’ type to ‘input’ on click and then back to ‘span’ on blur but it isn’t working as given in here:

Convert table cells to text-boxes with JQuery

here is the javascript code:

    <script type="text/javascript">
        $(document).ready(function() {
            $('#assets').click(function () {
                $('tr td:nth-child(3)').each(function () {
                    var html = $(this).html();
                    var input = $('<input type="text" />');
                    input.val(html);
                    $(this).html(input);
                });
            });
        });
    </script>

and here is the document body

<body>
    <div id="content">
        <table id="assets">
            <tr>
                <td class="asset_name"><span>Name</span></td>
                <td class="asset_value"><span>ast1</span></td>
                <td class="asset_name"><span>Location</span></td>
                <td class="asset_value"><span>Loc-1</span></td>
            </tr>
            <tr>
                <td class="asset_name"><span>Name</span></td>
                <td class="asset_value"><span>ast2</span></td>
                <td class="asset_name"><span>Location</span></td>
                <td class="asset_value"><span>Loc-2</span></td>
            </tr>
        </table>​
    </div>
</body>

using jQuery 1.7.2

What’s wrong here ? Please help !

Thanks!!

Update: only need to change the cells with class=’asset_value’ and only one cell at a time not all. Also, it should change back to span on blur..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this : 

    $(document).ready(function() {
    $('#assets').on('click', 'span', function() {
        var $e = $(this).parent();
        if($e.attr('class') === 'asset_value') {
            var val = $(this).html();
            $e.html('<input type="text" value="'+val+'" />');
            var $newE = $e.find('input');
            $newE.focus();
        }
        $newE.on('blur', function() {
            $(this).parent().html('<span>'+$(this).val()+'</span>');
        });
    });
});​

    this will change single cell on click and revert back to span on blur.

    • 0