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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 如何把table中的一行变成可编辑的?相关的知识,希望对你有一定的参考价值。

参考技术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();

 

以上是关于jquery 如何把table中的一行变成可编辑的?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery如何实现一个显示数字,双击后变成可输入框?

java中如何把JTable设置为不可编辑

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

material-table 如何做可选择和可编辑的表格?

怎么把datatable里的第一行数据取出来呀

elementUI 表格点击行可编辑