jQuery 使用父方法添加新行

发布于 2024-10-14 13:38:16 字数 1270 浏览 4 评论 0原文

这里我有一个html代码，其中输入文本框连续放置。如何在仅使用 parent() 函数的同时使用同一个表中的“+”按钮在包含另一个输入文本框的表中创建新行？

我这里有一些示例 jQuery 代码，但它们实际上不起作用：

          $(".plus").live("click", function(){
        var parent = $(this).parent().parent().parent(".iteration");
 parent.after('<table width="100%" border="0" bordercolor="#000000"><tr><td colspan="2"><label><input type="text" value="Create a task for this iteration" size="75%" height="25px"/></label></td></tr></table>');

        var nbinput = parent.find("input[type='text']").length;
        if(nbinput == 5)
            parent.find(".plus").attr("disabled","disabled");
        else if(nbinput == 2)
            parent.find(".moins").attr("disabled","");
    });

    $(".moins").live("click", function(){       
        var parent = $(this).parent().parent().parent(".iteration");
        parent.children("input").last().remove();
        var nbinput = parent.find("input[type='text']").length;
        if(nbinput == 4)
            parent.find(".plus").attr("disabled","");
        else if(nbinput == 1)
            parent.find(".moins").attr("disabled","disabled");
    });

原文

Here I have a html code where I have input textbox planted in a row. How can I use the '+' button in the same table while using ONLY parent() function to create a new row within the table that contains another input textbox?

I have some sample jQuery code here but they don't really work:

          $(".plus").live("click", function(){
        var parent = $(this).parent().parent().parent(".iteration");
 parent.after('<table width="100%" border="0" bordercolor="#000000"><tr><td colspan="2"><label><input type="text" value="Create a task for this iteration" size="75%" height="25px"/></label></td></tr></table>');

        var nbinput = parent.find("input[type='text']").length;
        if(nbinput == 5)
            parent.find(".plus").attr("disabled","disabled");
        else if(nbinput == 2)
            parent.find(".moins").attr("disabled","");
    });

    $(".moins").live("click", function(){       
        var parent = $(this).parent().parent().parent(".iteration");
        parent.children("input").last().remove();
        var nbinput = parent.find("input[type='text']").length;
        if(nbinput == 4)
            parent.find(".plus").attr("disabled","");
        else if(nbinput == 1)
            parent.find(".moins").attr("disabled","disabled");
    });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贱人配狗天长地久 2024-10-21 13:38:16

嗯，一些简化将大有帮助：

var parent, attribute_toggle;

attribute_toggle = function (nbinput, parent) {
    switch(nbinput) {
        case 5:
            parent.find('.plus').attr('disabled', 'disabled');
        case 4:
            parent.find('.plus').removeAttr('disabled');
        case 2:
            parent.find('.moins').removeAttr('disabled');
        case 1:
            parent.find('.moins').attr('disabled', 'disabled');
    }
};

$('.plus').live('click', function() {
    parent = $(this).parents('.iteration:first');
    parent.after('... removed for brevity ...');
    attribute_toggle(parent.find('input:text').length, parent);
});
$('.moins').live('click', function() {
    parent = $(this).parents('.iteration:first');
    parent.children('input:last').remove();
    attribute_toggle(parent.find('input:text').length, parent);
});

更新为更易于阅读，并将开关合并到一个函数中。

现在它更清晰了，请解释一下当您尝试执行以下操作时会发生什么运行此代码，并将其与您希望发生的情况进行对比。

Well, some simplification will go a long way:

var parent, attribute_toggle;

attribute_toggle = function (nbinput, parent) {
    switch(nbinput) {
        case 5:
            parent.find('.plus').attr('disabled', 'disabled');
        case 4:
            parent.find('.plus').removeAttr('disabled');
        case 2:
            parent.find('.moins').removeAttr('disabled');
        case 1:
            parent.find('.moins').attr('disabled', 'disabled');
    }
};

$('.plus').live('click', function() {
    parent = $(this).parents('.iteration:first');
    parent.after('... removed for brevity ...');
    attribute_toggle(parent.find('input:text').length, parent);
});
$('.moins').live('click', function() {
    parent = $(this).parents('.iteration:first');
    parent.children('input:last').remove();
    attribute_toggle(parent.find('input:text').length, parent);
});

Updated to be easier to read, and merged the switch into a function.

There, now that it is a bit more legible, explain what happens when you try to run this code, and contrast that with what you would like to happen.

回复收藏 0 原文