Javascript 单击即可将表格单元格从范围更改为输入_Javascript_Jquery

Javascript 单击即可将表格单元格从范围更改为输入

javascript jquery

Javascript 单击即可将表格单元格从范围更改为输入,javascript,jquery,Javascript,Jquery,我正在尝试在单击时将表格单元格从“span”类型更改为“input”，然后在模糊时将其重新更改为“span”，但它无法按此处给出的方式工作：以下是javascript代码： <script type="text/javascript"> $(document).ready(function() { $('#assets').click(function () { $('tr td:nth-child(

我正在尝试在单击时将表格单元格从“span”类型更改为“input”，然后在模糊时将其重新更改为“span”，但它无法按此处给出的方式工作：

以下是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>


$（文档）.ready（函数（）{
$（“#资产”）。单击（函数（）{
$（'tr td:nth child（3）'）。每个（函数（）{
var html=$（this.html（）；
变量输入=$（''）；
val（html）；
$（this）.html（输入）；
});
});
});

这是文档的主体

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


名称
ast1
位置
Loc-1
名称
ast2
位置
Loc-2

使用jquery1.7.2

这里怎么了？请帮忙

谢谢

更新：只需要更改class='asset_value'的单元格，并且一次只更改一个单元格，而不是所有单元格。此外，它还应更改回模糊时的span..

您可以使用

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);
            });
        });
    });

我认为你走对了试试这个：

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

$（'td'）。单击（函数（）{
$（this.children（'span'）.html（''）；
})

希望这能帮助您：

HTML:

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

$（文档）.ready（函数（）{
$（“#资产tr td:n子项（3）”。单击（函数（）{
var html=$（this.html（）；
变量输入=$（''）；
val（html）；
$（此）.replaceWith（输入）；
});
});?

试试这个：

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

$（文档）.ready（函数（）{
$（“#资产”）。在（'click'，'span'，function（）上{
var$e=$（this.parent（）；
如果（$e.attr（'class'）='asset\u value'）{
var val=$（this.html（）；
$e.html（“”）；
var$newE=$e.find（'input'）；
$newE.focus（）；
}
$newE.on（'blur'，function（）{
$（this.parent（）.html（“”+$（this.val（）+“”）；
});
});
});

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

在演示中：第一次单击时效果良好，但再次单击时会变得奇怪。您应该使用var html=$（this）.text（）；而不是var html=$（this.html（）@user723438是的，我使用了

eq（）

方法，而不是

n个孩子

，请尝试更新的演示。@Raminson谢谢！！更新后的演示看起来很棒，但是请帮忙！我只需要更改单击的表格单元格，而不是所有单元格。@Raminson再次感谢！！，和我想的完全一样，但正如我说的，我只需要更改一个。嘿，它只更改了第三列！做得不错：）

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

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

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

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