单击按钮以编辑表格标题答案

【问题标题】：Click button to Edit Table titles单击按钮以编辑表格标题
【发布时间】：2014-12-24 04:16:02
【问题描述】：

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

我可以重命名标题并保存新名称。我不擅长 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');
}) ;

【问题讨论】：

标签： javascript jquery

【解决方案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);

        });

    }

}) ;

【讨论】：

这真是太棒了！非常感谢！

【解决方案2】：

• 你不应该在追加中使用 id 这将创建多个同名的 id。
• 使用$(".form-control").length 检查它是否存在。这将解决多次单击按钮时的多次输入问题。
• 创建一个新按钮来提交您的更改。
• 为新按钮创建另一个单击事件。
• 使用它$.val() 获取输入值而不是将该值传递给新表标题。你就完成了。

我希望这将为您指明正确的方向。 :D

【讨论】：