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>

jQuery1.7.2を使用する

ここで何が問題になっていますか？助けてください ！

ありがとう！！

更新：class ='asset_value'のセルのみを変更する必要があり、一度に1つのセルのみを変更する必要があります。すべてではありません。また、ぼかし時にスパンに戻る必要があります。

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

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 に答える
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 に答える
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 に答える