2

这是我使用的标记

<table cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr class="tr-head">
                <th>Amount Owed</th>
                <th>Amount Paid</th>
                <th>Check / Cash / Online</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr class="row0">
                <td>$10 <input type="text" name="amount_owed" id="amount_owed" value="10" style="display: none; width: 40px;" /></td>
                <td>$20 <input type="text" name="amount_paid" id="amount_paid" value="20" style="display: none; width: 40px;" /></td>
                <td>$30 <input type="text" name="check_cash_online" id="check_cash_online" value="30" style="display: none; width: 40px;" /></td>
                <td><a href="javascript:void(0);" class="edit-row" title="row0">Edit</a></td>
            </tr>
            <tr class="row1">
                <td>$10 <input type="text" name="amount_owed" id="amount_owed" value="10" style="display: none; width: 40px;" /></td>
                <td>$20 <input type="text" name="amount_paid" id="amount_paid" value="20" style="display: none; width: 40px;" /></td>
                <td>$30 <input type="text" name="check_cash_online" id="check_cash_online" value="30" style="display: none; width: 40px;" /></td>
                <td><a href="javascript:void(0);" class="edit-row" title="row1">Edit</a></td>
            </tr>
        </tbody>
    </table>

当我单击特定行的编辑时，我想删除前三个子单元格td文本（即 10 美元、20 美元 ....），但元素除外。input输入类型应在隐藏单元格文本后显示。请帮助我如何使用 jquery 脚本制作它。谢谢

我已经尝试了一些脚本来做到这一点，即

$(document).ready(function(){
            $('.edit-row').click(function(){
                    var title = $(this).attr('title');
                    $('.'+title+' td').text('');
                });
        });

但是上面的脚本使单元格为空。

4

4 回答 4

3

此代码将为您工作：

​$('.edit-row​​').click(function() {
    $(this).closest('tr').find('td').not(':last')
        .contents().filter(
            function() {
                return this.nodeType == 3;
            }).remove();
});​

在这里测试。

Zachary Kniebel 用.contents()方法击中它

抱歉，我忘记了显示输入元素的部分：

$('.edit-row').click(function() {
    $(this).closest('tr').find('td').not(':last').contents()
        .filter(
            function() {
                return this.nodeType != 3;
            })
        .show().parent().contents()
        .filter(
            function() {
                return this.nodeType == 3;
            }).remove();
});​

测试和工作。

于 2012-10-26T13:39:42.007 回答
1

查找 jQuery 的.contents()方法。它将返回调用元素/集合的所有文本、元素和内容节点。您要做的是创建一个过滤器方法，如下所示：

var filterNodes = function() {
    return this.nodeType === 1 || this.nodeType === 3;
}

这将返回所有元素和文本节点。从那里，选择要从中删除文本的元素节点并删除文本节点。

注意：该.contents()方法返回 CHILDREN 而不是 DESCENDANTS

编辑：

我重新阅读了您的问题，我认为这更适合您：

  1. td使用标准 jQuery 选择器循环前三个

  2. 运行以下过滤器方法，仅获取文本节点：

    var filterNodes = function () { return this.nodeType == 3; }

  3. 像这样调用过滤器方法：

    var firstThreeTDs = ....

    var nodeSet = firstThreeTDS.contents().filter(filterNodes).toArray();

    for (var i = 0; i < nodeSet.length; i++) {

        nodeSet[i].parentNode.removeChild(nodeSet[i]);`

    }

  4. 使用.show()方法、.css()方法或效果方法（淡入淡出、幻灯片等）显示输入框


编辑2：

有一个替代解决方案，但它不是最好的，它未经测试，并且需要大量的调试时间（特别是因为你可能会丢失一些属性/属性，基于你的实现）：你可以使用 jQuery 的clone()方法，复制每个 中的输入元素td，然后使用该.html()方法将td的内部 HTML 设置为该重复的输入元素。这不是一个好的解决方案，它的开销更大，而且有点新手，但如果您对手动操作 DOM 感到不舒服，它会起作用。


如果您需要更多帮助/说明，请告诉我。祝你好运！:)

于 2012-10-26T13:26:59.063 回答
0 
$('.row0 #amount_owed,.row0 #amount_paid,row0 #check_cash_online').remove();
于 2012-10-26T13:26:04.807 回答
0 
    $('.edit-row').click(function(){
       $(this).parents("tr").find('td').not(":last").hide().html("");
    });

http://jsfiddle.net/bLygN/2/

于 2012-10-26T13:34:42.640 回答