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

Question

我有表格，我必须编辑第二列，所以当我单击第二列中的一个单元格时，将显示带有 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);      
    });

});

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