1

テーブルがあり、2 番目の列を編集する必要があるため、2 番目の列のセルをクリックすると、2 つの画像を含むテキスト ボックスが表示されます。

テキストボックスに値を入力してeditCost画像をクリックした後、テキストをスパンに設定する必要があります。しかし、私はできません。

HTML

<table class="gs">
    <thead>
        <tr role="row">
        <th>Name</th>
        <th>Cost in (USD)</th>
        </tr>
    </thead>

<tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="odd">
                <td class=" sorting_1">
                    Culture 
                </td>

                <td align="right" class=" ">
                    <span></span>
                    <span> 
                        <input type="text" name="Culture" value="" id="Culture"> 
                        <img  alt="editCost">
                        <img  alt="cancelCost">
                    </span>
                </td>

            </tr><tr class="even">
                <td class=" sorting_1">
                    RedBloodCell 
                </td>

                <td align="right" class=" ">
                    <span>100</span>
                    <span> 
                        <input type="text" name="RedBloodCell" value="" id="RedBloodCell"> 
                        <img  alt="editCost">
                        <img  alt="cancelCost">
                    </span>
                </td>

            </tr><tr class="odd">
                <td class=" sorting_1">
                    WhiteBloodCell 
                </td>

                <td align="right" class=" ">
                    <span>100</span>
                    <span> 
                        <input type="text" name="WhiteBloodCell" value="" id="WhiteBloodCell"> 
                        <img  alt="editCost">
                        <img  alt="cancelCost">
                    </span>
                </td>

            </tr><tr class="odd even">
                <td class=" sorting_1">
                    WhiteBloodCell 
                </td>

                <td align="right" class=" ">
                    <span>100</span>
                    <span> 
                        <input type="text" name="WhiteBloodCell" value="" id="WhiteBloodCell"> 
                        <img  alt="editCost">
                        <img  alt="cancelCost">
                    </span>
                </td>

            </tr>
</tbody>
</table>

脚本

jQuery(document).ready(function() {
    jQuery('td span:nth-child(2)').hide();

    jQuery("table.gs tbody tr td:nth-child(2)").click(function() {
        jQuery('td span:nth-child(2)').hide();
        jQuery(this).find("span:nth-child(2)").show();
        var value = jQuery.trim(jQuery(this).text());
        jQuery(this).find("input").val(value);
        jQuery(this).find("span:nth-child(1)").text('');
    });

    jQuery('img[alt="editCost"]').click(function() {
        var value = jQuery(this).siblings("input[type=text]").val();
        jQuery(this).parent().siblings("span").text(value);
        jQuery(this).parent().hide(1);      
    });

    jQuery('img[alt="cancelCost"]').click(function() {
        var value = jQuery(this).siblings("input[type=text]").val();
        jQuery(this).parent().siblings("span").text(value);
        jQuery(this).parent().hide(1);      
    });

});
4

4 に答える 4

2

他の解決策は、以下のようなものです。

2 つの変更が必要です。

  1. td ではなくスパンでクリック イベントをバインドしてみてください。td のバインディング クリックは、編集またはキャンセル ボタンをクリックしたときにもトリガーされるため、preventDefault を追加することもできます。

  2. 要素を取得しているのではなく、入力フィールドの値を取得していません。

したがって、コードは次のようになります

jQuery(document).ready(function() {
    jQuery('td span:nth-child(2)').hide();

    jQuery("table.gs tbody tr td:nth-child(2) .label").click(function() {
        jQuery('img[alt="cancelCost"]').trigger('click');
        jQuery(this).parent().find("span:nth-child(1)").hide();
        jQuery(this).parent().find("span:nth-child(2)").show();
        var value = jQuery.trim(jQuery(this).parent().text());
        jQuery(this).parent().find("input").val(value);
    });

    jQuery('img[alt="editCost"]').click(function() {
        var value = jQuery(this).siblings("input[type=text]").val();
        jQuery(this).parent().parent().find("span.label").text(value).show();
        jQuery(this).parent().hide(1);      
    });

    jQuery('img[alt="cancelCost"]').click(function() {
        jQuery(this).parent().hide(1);      
        jQuery(this).parent().parent().find("span.label").show();
    });

});

このフィドルを試してくださいhttp://jsfiddle.net/jCHWy/32/

また、編集前にすでに持っていた値を元に戻すこともありません。キャンセルをクリックすると、スパンは空白になります。これも修正。

于 2013-09-26T12:37:35.437 に答える
0

以下の作品：

jQuery(this).closest("td").find("span").text(value);

更新されたフィドルは次のとおりです。http://jsfiddle.net/jCHWy/9/

于 2013-09-26T12:19:12.230 に答える