javascript - 单击按钮编辑表格标题

Question

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

我可以重命名标题并保存新名称。我不擅长 jquery 以及我创建的一堆输入字段，而且我无法保存新名称。 <强> FIDDLE

任何帮助都会拯救我的一天。提前致谢。

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

这里有一个 fiddle 可以解决您的问题。

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);

        });

    }

}) ;