Question

我正在尝试向行添加按钮以进行表格控制。它应该每行只出现一次。我遇到很多问题，确保删除按钮，然后在单击时添加到新行，如果单击同一行则不删除，依此类推。几乎是一个切换，但在不同的元素之间。

我遇到问题，按钮仍然存在，按钮全部消失，按钮没有消失等等。我真的很难控制它！

请查看我的小提琴：

    function tableTools(tableIdContainer){


    var addButton = '<button type = "button" class = "tableToolsButton addButton">ADD</button>';
    var infoButton = '<button type = "button" class = "tableToolsButton infoButton">INFO</button>';
    var editButton = '<button type = "button" class = "tableToolsButton editButton">EDIT</button>';
    var deleteButton = '<button type = "button" class = "tableToolsButton deleteButton">DELETE</button>';

    var tableTools = '<div class = "tableTools" style = "display:none;">' + infoButton + editButton + deleteButton + '</div>';


    if($('.tableTools').length){
        $('.tableTools').fadeOut(100,function(){
            $('.tableTools').remove();
        return tableTools;  
        }); 
    }else{
        return tableTools;  
    }   
}

$(document).ready(function(){
    // div 1
    $('#wrapper').on('click', '#div1', function(){
        $(tableTools('#div1')).appendTo($(this)).fadeIn(500);
    });

    // div 2
    $('#wrapper').on('click', '#div2',function(){
        $(tableTools('#div2')).appendTo($(this)).fadeIn(500);

    });

    // div 3
    $('#wrapper').on('click', '#div3',function(){
        $(tableTools('#div3')).appendTo($(this)).fadeIn(500);
    });
});

Answer 1

检查http://jsfiddle.net/xvP4E/10/

function tableTools(tableIdContainer, $row){


    var addButton = '<button type = "button" class = "tableToolsButton addButton">ADD</button>';
    var infoButton = '<button type = "button" class = "tableToolsButton infoButton">INFO</button>';
    var editButton = '<button type = "button" class = "tableToolsButton editButton">EDIT</button>';
    var deleteButton = '<button type = "button" class = "tableToolsButton deleteButton">DELETE</button>';

    var tableTools = '<div class = "tableTools" style = "display:none;">' + infoButton + editButton + deleteButton + '</div>';


    if($row.find('.tableTools').size()){
        $('.tableTools').fadeOut(100,function(){
            $('.tableTools').remove();
        return tableTools;  
        }); 
    }else{
        $('.tableTools').remove()
        return tableTools;  
    }   
}

$(document).ready(function(){
    // div 1
    $('#wrapper').on('click', '#div1', function(){
        $(tableTools('#div1', $(this))).appendTo($(this)).fadeIn(500);
    });

    // div 2
    $('#wrapper').on('click', '#div2',function(){
        $(tableTools('#div2', $(this))).appendTo($(this)).fadeIn(500);

    });

    // div 3
    $('#wrapper').on('click', '#div3',function(){
         $(tableTools('#div2', $(this))).appendTo($(this)).fadeIn(500);
    });
});

由于您通过检查一个ANYWHERE中是否存在一个按钮组来指示是否应该显示或删除按钮组，因此当您单击另一行时，您将只删除一个按钮组。要解决此问题，请检查单击行是否包含按钮组。

我通过向tableTools添加额外参数$row进行了快速修正，并在此搜索按钮组，并确定将删除或显示分组按钮。在显示之前，旧的按钮将被移除。

Answer 2

您的代码的更短版本如下。我相信如果需要，调试和构建应该更容易。还包括tableToolsButtons的“占位符” - 按钮不会导致flicker' or cause themselves to disappear if they are clicked. In the占位符处理程序，您可以决定是否在使用按钮后隐藏按钮。

function tableTools(){

    var addButton = '<button type = "button" class = "tableToolsButton addButton">ADD</button>';
    var infoButton = '<button type = "button" class = "tableToolsButton infoButton">INFO</button>';
    var editButton = '<button type = "button" class = "tableToolsButton editButton">EDIT</button>';
    var deleteButton = '<button type = "button" class = "tableToolsButton deleteButton">DELETE</button>';    
    var tableTools = '<div class = "tableTools">' + infoButton + editButton + deleteButton + '</div>';

    var that = $(this);
    if( $('.tableTools').length ) {
        $('.tableTools').fadeOut(100,function() {
            $(this).remove();
            that.append(tableTools).fadeIn(500);        
        });
    } else {
        $(this).append(tableTools).fadeIn(500);
    }
}

$(document).ready(function(){
    // div 1,2,3
    $('#wrapper').on('click', '#div1,#div2,#div3', tableTools)
    //tabletools buttons
    .on('click', '.tableToolsButton', function(e) {
        e.stopPropagation();
        //....
    });
});

WORKING JSFIDDLE DEMO

Answer 3

如果控制的是你想要的......

然后你应该简化这个并将你的想法放在一起。

var buttons = ['add','info','edit','delete'],//define buttons
    butts = '',//set up buttons output
    tt = 'tableTools';//button parent class

for (i = 0; i < buttons.length; i++) {//for each button
    butts += '<button type="button" class="tableToolsButton '+buttons[i]+'Button">'+buttons[i]+'</button>';//print output
}

var  output = '<div class="tableTools" style="display:none;">'+butts+'</div>';//store output

function tableTools(el){    
    var go = el.children('.'+tt).length,//does current one have buttons?
        tabs = $('.'+tt),//get buttons
        fo = 100,//fade out
        fi = 500;//fade in

    if (tabs.length && !go){//there are buttons, but not on this one
        tabs.fadeOut(fo).remove();//so remove the buttons
        el.append(output).children('.'+tt).fadeIn(fi);//and add them to current
    } else if (go) {//if there are buttons on current
        tabs.fadeOut(fo).remove();//remove them
    } else if (!go) {//if no buttons exist on current
        el.append(output).children('.'+tt).fadeIn(fi);//make them
    }

    //prevent on button click
    $('.tableToolsButton').on('click', function(e) {
        e.stopPropagation();
        //add code for buttons here
    });
}

$(document).ready(function(){
    $('#wrapper > div').on('click', function(){ tableTools($(this)); });//run on click
});

这样编辑和编辑就容易得多了维护。

Made a fiddle...

添加和删除唯一的附加数据

3 个答案:

添加和删​​除唯一的附加数据

3 个答案:

添加和删除唯一的附加数据