1

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

3

问题是，当点击处理程序触发时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
});

小提琴

于 2013-09-26T12:35:07.123 回答
2

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

你需要两个改变，

  1. 尝试在 span 上绑定 click 事件，而不是在 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

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

于 2013-09-26T12:12:17.020 回答
0

以下作品：

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

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

于 2013-09-26T12:19:12.230 回答