zoukankan      html  css  js  c++  java
  • 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();
  • 相关阅读:
    DC中为什么要用Uniquify?
    hdu 1596 find the safest road
    hdu2112 HDU Today
    hdu 2066 一个人的旅行
    poj 3026 Borg Maze
    poj 1979 Red and Black
    poj 1321 棋盘问题
    hdu 1010 Tempter of the Bone
    hdu 4861 Couple doubi
    codeforces584B Kolya and Tanya
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/5192886.html
Copyright © 2011-2022 走看看