Question

我正在尝试将表格单元格从'span'类型更改为'input'，然后单击，然后返回到'span'on blur，但它不能正常工作：

Convert table cells to text-boxes with JQuery

这是javascript代码：

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

这是文件正文

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

使用jQuery 1.7.2

这里有什么问题？请帮忙！

谢谢！

更新：只需要更改class ='asset_value'的单元格，一次只能更改一个单元格。此外，它应该改变回模糊的范围..

Answer 1

试试这个：

$(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>');
        });
    });
});

这会在点击时更改单个单元格，并在模糊时恢复为跨度。

Answer 2

您可以使用replaceWith()方法，html()方法清空所选元素并向其添加html标记，请尝试以下操作：

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

<小时/> 由于replaceWith方法更改了标记的结构，您应该为生成的标记委派事件，您可以使用on方法，尝试以下操作：

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

Answer 3

希望这会对您有所帮助：http://jsfiddle.net/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>

示例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);
    });
});?

Answer 4

我认为你是在正确的道路上试试这个：

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

Answer 5

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

单击时将表格单元格从跨度更改为输入

5 个答案: