admin管理员组

文章数量:1287524

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..

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..

  • javascript
  • jquery
Share Improve this question edited May 23, 2017 at 12:16 CommunityBot 11 silver badge asked Aug 9, 2012 at 11:44 user723438user723438
Add a ment  | 

5 Answers 5

Reset to default 4

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.

Hopefully, this will help you: http://jsfiddle/RBGME/19/

HTML:

<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>

Sample CSS:

td { border: 1px solid #aaa; height: 30px; text-align: center; width: 100px; }
input, input:hover, input:focus { width: 100px; height: 30px; box-sizing: border-box; outline: none; background-color: #eee; }

jQuery:

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

You can use the replaceWith() method, html() method empties the selected element and appends html markup to it, try the following: 

    $(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).replaceWith(input);
            });
        });
    });

DEMO

As the replaceWith method changes the structure of the markup, you should delegate the events for the generated markup, you can use the on method, try the following:

    $(document).ready(function() {
        $(document).on('click', '#assets td', function () {
                var html = $(this).text()
                var input = $('<input type="text" />');
                input.val(html);
                $(this).replaceWith(input);
                $('#assets input').focus();
        });

        $(document).on('blur', '#assets input', function(){
            $(this).replaceWith('<td class="asset_value"><span>'+this.value+'</span></td>')
        })
    });

DEMO

I think you are on the right way try this:

$(document).ready(function() {
   $('#assets').click(function () {
       $(this).find("span").replaceWith(input);
   });
});

$('td').click(function(){
$(this).children('span').html('<input type="text">');
})

本文标签： javascriptChange table cell from span to input on clickStack Overflow

版权声明：本文标题：javascript - Change table cell from span to input on click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741275166a2369687.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。