2

我正在尝试将表格单元格从“跨度”类型更改为单击时的“输入”，然后在模糊时返回到“跨度”，但它不按此处给出的那样工作：

使用 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' 的单元格，并且一次只需要一个单元格，而不是全部。此外，它应该变回模糊范围。

4

5 回答 5

4

尝试这个 ：

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

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

于 2012-08-09T12:12:49.850 回答
2

希望这会对您有所帮助：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);
    });
});?
于 2012-08-09T12:01:12.987 回答
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);
            });
        });
    });

演示

由于该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>')
        })
    });

演示

于 2012-08-09T11:48:08.543 回答
0

我认为你是在正确的方式试试这个：

$(document).ready(function() {
   $('#assets').click(function () {
       $(this).find("span").replaceWith(input);
   });
});
于 2012-08-09T11:50:21.723 回答
0 
$('td').click(function(){
$(this).children('span').html('<input type="text">');
})
于 2012-08-09T11:52:26.613 回答