单击按钮以编辑表格标题

Click button to Edit Table titles

本文关键字：表格 标题 编辑 按钮 单击      更新时间：2023-09-26

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

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

任何帮助都会拯救我的一天。提前谢谢。

j查询： 

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

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

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

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



我希望这能为你指明正确的方向。 :D

相关文章：