jquery 如何把table中的一行变成可编辑的？

Posted 2023-04-25

参考技术A 大体的思路说一下：
1、在table的某个单元格点击中，先取出该单元格的值，再将该值赋给一个input text，并将这个input text动态添加到这个单元格中，代码可以写成：
var tdvalue=$(this).val();
$(this).html("<input id='tempinput' type='text' value='"+tdvalue+"'/>");
2、当单元格失去焦点时，将文本框的值回填给单元格，代码写成：
$(this).html($("tempinput").val());
3、实际写代码时还要考虑临时加入的文本框的宽度要与单元格一致等内容。

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

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