我有一个带有列标题的表格。还有一个编辑按钮。如果我单击该按钮,表标题应该是一个输入字段,其中标题名称作为值。编辑按钮将变成保存按钮。
我可以重命名标题并保存新名称。我不擅长 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');
}) ;
最佳答案
这里有一个 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);
});
}
}) ;
关于javascript - 单击按钮编辑表格标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27627040/