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();
  • 相关阅读:
    4.9cf自训9..
    数位dp-入门模板题 hdu2089
    熟能生巧 汽车停车入位技巧解析-倒车入库--侧边停车
    MyBatis参数传入集合之foreach动态sql
    jquery如何判断checkbox(复选框)是否被选中
    Mybatis关联查询(嵌套查询)
    Mysql 分页语句Limit用法
    $.ajax返回的JSON格式的数据后无法执行success的解决方法
    JavaWeb学习总结(十二)——Session
    Spring MVC中Session的正确用法之我见
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/5192886.html
Copyright © 2011-2022 走看看