js-jquery-将table的td转化成可编辑的文本

Posted 2020-06-14

1.使用插件mindmup-editabletable.js

$(‘#table‘).editableTableWidget({editor: $(‘<textarea>‘)});

 

 

 

2.jquery直接处理

 

function editTable_t(){
    $("table").on("click", "td:not(.active)", function () {    
        var $this = $(this);
        var $textbox = $("<input>", { type: "text", size: 5, value: $this.addClass("active").text() });
        $this.html($textbox);
        $textbox.focus();    
    });
    $("table").on("blur", "input:text", function () {        
        var $this = $(this);
        $this.parent().removeClass("active").text($this.val());
    });
}

 

function editTable_t(){
    $("table tr td").attr("contenteditable", true);
      $("table tr td").each(function() {
        var contents = $(this).html();
        $(this).html($("<div>").append(contents));
    });
    $("table tr td div").attr("contenteditable", true);
}

 

 

function editTable_t(){
$("table td").click( function( e ){

    if ( $(this).find(‘input‘).length ) {
         return ;   
    }        
    var input = $("<input type=‘text‘ size=‘5‘ />")
                      .val( $(this).text() );

    $(this).empty().append( input );

    $(this).find(‘input‘)
           .focus()
           .blur( function( e ){
                  $(this).parent(‘td‘).text( 
                     $(this).val()
                  );
            });    
});
}

 

 

$("table tr td").on(‘blur‘,"input[type=‘text‘]", function( e ){
        $(this).closest(‘td‘).text( 
            $(this).val()
        );
});

$("table").on(‘click‘,‘td‘, function( e ){
    
    if ( $(this).find(‘input‘).length ) {
         return ;   
    }    
    
    var input = $("<input type=‘text‘ size=‘5‘ />")
                      .val( $(this).text() );
        
    $(this).empty().append( input );
    
});

 

 

 

var z={};
function tdClicks(){
var x="",y="";
$("table tr td").click(function(){
    z=$(this);
    x = $(this).text() || $(this).find("input[type=‘text‘]").val();
    if(!x){
        x="";
    }
    $(this).html("<input type=‘text‘ size=‘5‘ value=‘"+ x+"‘ />");
    $(this).unbind("click");
    $(this).find("input[type=‘text‘]").bind("blur", function(){
        catchme($(this).val());
        tdClicks();
    });
});
}

function catchme(wht){
    $(z).text(wht);
}

tdClicks();