单击按钮以编辑表标题 [英] Click button to Edit Table titles

问题描述

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

I have a table with Column title. There is also a edit button. If I click the button, Table title should be a Input field with title name as a value in it. Edit button will turn into Save Button.

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

I can rename the title and Save the new names. I not good in jquery and what I made creating bunch of input fields and I can't save new names. FIDDLE

任何帮助都可以节省我的一天。提前致谢。

Any help will save my day. Thanks in advance.

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

推荐答案

这是解决问题的小提琴。

Here is a fiddle that solves your problem.

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

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

It uses a common approach of toggling an element's class (or some other attribute), to determine the state of your program. In this case, it determines whether or not the columns are in edit-mode, and changes the button text and th html accordingly.

$("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);

        });

    }

}) ; 

这篇关于单击按钮以编辑表标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！