单击按钮编辑表格标题

Question

我有一张列标题的桌子。还有一个编辑按钮。如果我单击按钮，表标题应该是一个输入字段，其中的标题名作为值。编辑按钮将变成保存按钮。

我可以重命名标题和保存新的名称。我不擅长jquery，也不擅长创建大量的输入字段，也无法保存新的名称。小提琴

任何帮助都能挽救我的日子。提前谢谢。

jQuery:

var textInfo = $('.table th').text();

$("html").on('click', '.btn-danger', function() {
   $('.table th').append('<input id="attribute" type="text" class="form-control" value="' + textInfo + '" >');

    $('.btn-danger').text('Save');
}) ;   

Answer 1

这里有一把小提琴可以解决你的问题。

http://jsfiddle.net/has9L9Lh/54/

它使用一种通用的方法来切换元素的类(或其他属性)，以确定程序的状态。在这种情况下，它确定列是否处于编辑模式，并相应地更改button文本和th html。

$("html").on('click', '.btn-danger', function() {

       var editMode = $(this).hasClass('edit-mode'),
           columns  = $('.table th');

    if (!editMode){

        $(this).html('Save').addClass('edit-mode');

        columns.each(function(){

            var txt = $(this).text();
            var input = $('<input type="text">');
            input.val(txt);
            $(this).html(input);

        });

    } else {

        $(this).html('Edit').removeClass('edit-mode');

        columns.each(function(){

            var newName = $(this).find('input').eq(0).val();
            $(this).html(newName);

        });

    }

}) ; 

Answer 2

·您不应该在附件中使用id --这将创建多个同名id。

·使用$(".form-control").length检查是否存在。这将解决多次单击按钮时的多个输入问题。

·创建一个新按钮来提交您的更改。

·为新按钮创建另一个单击事件。

·而不是使用它$.val()获取输入值，而不是将该值传递给新的表标题。你就完蛋了。

我希望这能为你指明正确的方向。:D