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

这是解决问题的小提琴。

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

单击按钮以编辑表标题

2 个答案: