单击按钮以编辑表标题

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

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

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

jQuery的：

var textInfo = $('.table th').text(); $("html").on('click', '.btn-danger', function() { $('.table th').append(''); $('.btn-danger').text('Save'); }) ; 

Answer 1

这是一个解决你的问题的小提琴。

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

它使用一种常见的方法来切换元素的类（或其他一些属性），以确定程序的状态。 在这种情况下，它确定列是否处于编辑模式，并相应地更改button文本和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.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