Question

我有桌子，我必须编辑第二列，所以当我点击第二列中的单元格时，将显示带有2个图像的文本框。

在文本框中键入值并单击editCost图像后，我必须在span中设置文本。但我不能。

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

});

Answer 1

问题是当点击处理程序在img[alt="editCost"]上触发时，事件会传播并触发table.gs tbody tr td:nth-child(2)上的点击处理程序，这会清空范围的文本。

将event.stopPropagation()添加到img[alt="editCost"]点击处理程序：

jQuery('img[alt="editCost"]').click(function(e) {
    e.stopPropagation();
    // your code
});

Fiddle

Answer 2

其他解决方案可能如下所示，

您需要进行两项更改

尝试绑定跨度上的click事件，而不是td。由于您单击编辑或取消按钮时，单击td上的绑定也会触发，但您也可以添加preventDefault。
你没有取得输入字段的值，而是抓住元素。

所以你的代码看起来应该是这样的

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/

您也没有恢复编辑前的价值。点击取消后，跨度为空白。修改了这个。

Answer 3

尝试var value = jQuery(this).siblings("input[type=text]").val();

Answer 4

以下作品：

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

这是更新的小提琴：http://jsfiddle.net/jCHWy/9/

如何在父级兄弟跨度上设置文本

4 个答案:

Fiddle