2

テーブルがあり、特定のスパンをクリックすると、その前のスパンがラベルからテキストフィールドに変わる必要があります。以下は表です。

<table>
    <tbody>
        <tr>
            <td><span class="spanName">John Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
        <tr>
            <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
    </tbody>
</table>

ここで、John Doeがクリックされた後のAlter、つまりJohn Doeだけからテキストフィールドに変更する必要がある前のスパンを考えてみましょう（これは他のすべてにも当てはまります）。John Doeのスパンの変更をクリックすると、結果は次のようになります。

<table>
    <tbody>
        <tr>
            <td><span class="spanName"><input type="text" /></span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
        <tr>
            <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
    </tbody>
</table>

可能であれば、：nextなどを使用してjQueryで可能だと思いますが、IDではなくクラスのみを使用してこれを実装する必要があります。

また、スパンの代わりにアンカーを使うべきだと思われる場合は、お知らせください。jQueryの：nextおよび：previous機能のために、スパンを使用しています。

どんな助けでも大歓迎です

4

5 に答える 5

4

これにより、クリックするとテキストボックスが表示され、テキストを調整できるようになります。次に、ぼかし時に、入力した新しいテキストでスパンを元に戻します。例

JavaScript

$('.spanName').click(function() {
    var $elem = $(this);
    var text = $elem.text();
    var input = $('<input value="' + text + '" />')
    $elem.text('').append(input);
    input.select();

    input.blur(function() {
        var text = input.val();
        input.parent().text(text);
        input.remove();
    });
});

HTML

<table>
    <tbody>
        <tr>
            <td><span class="spanName">John Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
        <tr>
            <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
    </tbody>
</table>
于 2010-12-09T15:42:15.113 に答える
1

このようなもの：

$(".spanDefaultName").click(function() {
    var text = $(this).prev("span").text();
    $(this).prev("span").hide();
    $(this).before('<input value="' + text + '" />');
    $(this).unbind("click");
});

デモ： http： //jsfiddle.net/karim79/MWwyR/4/

于 2010-12-09T15:26:08.620 に答える
0

次のようにすることで、これをどのように行うことができるかを確認できます。

$('.spanDefaultName').click(function() {
    if($(this).prev().find(':input').length) {
        var text = $(this).prev().val();
        $(this).prev().text(text);
    } else {
        var text = $(this).prev().text();
        $(this).prev().html('<input type="text" value="' + text + '"/>');
    }
});

これにより、テキストがスパンから外され、テキストボックスが作成され、テキストが挿入されます。これは、ページ上のこのすべてのインスタンスで機能します。

編集：更新されたリクエストに従って、これは必要なスパンに入力要素があるかどうかに基づいて切り替わります。その場合、テキストボックスの値を使用してテキストに戻ります。

于 2010-12-09T15:26:48.493 に答える
0

どう？$('span.clickable').click(function () { $(this).prevAll('span').last().html('<input ....>'); });

于 2010-12-09T15:26:40.977 に答える
0

私はこれがあなたが望むことをするべきだと思います

    $('span.spanDefaultName').click(function() {

       val = $(this).prev().text();
       $(this).prev().remove();
       $(this).parent().prepend($('<input type="text" value="' + val + '" />'));

    });

ただし、このフォームを送信する場合は、入力に名前属性が必要になります

于 2010-12-09T15:31:39.947 に答える