td 转 input js代码

1.js 代码

var tbid = "#excel";//这里设置你的table 的id，其他都不用变
var tdclass="";
var inputfomate = "<input type='text'/>";
var pre = null;
var tdinputselection="";

function getSelectionStart(o) {
    if (o.createTextRange) {
        var r = document.selection.createRange().duplicate();
        r.moveEnd('character', o.value.length);
        if (r.text == '') return o.value.length
        return o.value.lastIndexOf(r.text);
    } else return o.selectionStart;
}
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    }
    else if (document.getSelection) {
        return document.getSelection();
    }
    else if (document.selection) {
        return document.selection.createRange().text;
    }
}
$(function () {
    $(tbid).click(function (e) {
        stopevent(e);
        var cur = e.target;
        if ($(cur).is("td" + tdclass)) {
            if (!$(cur).data("tov")) $(cur).data("tov", $(cur).text()+"");
            switchtdinput(cur);
        }
    });
    $(tbid).find("tr").each(function () {
        $(this).find("td" + tdclass).each(function (i) {
            $(this).data("i", i);
        });
    });
});

function switchtdinput(obj) {
    if (pre) doinpleave(pre);
    var width = $(obj).width() * 0.9;
    var objtxt=$.trim($(obj).text());
    $(obj).html($(inputfomate).val(objtxt).width(width));
    $(obj).width(width);    
    pre = $(obj).find('input').css("border", "1px solid red")[0];
    $(obj).find('input').trigger("focus").trigger("select");
    $(obj).find('input').click(function (event) {
        stopevent(event);
        return false;
    }).blur(function (event) {        
        inpleave(event, this);
    }).keypress(function (event) {
        if(event.keyCode == 13 || event.which == 13)
         return setpreornext(event, this);
    }).keyup(function (event) {
        if (event.keyCode != 13 || event.which != 13)
        return setpreornext(event, this);
    }).keydown(function (event) {       
        tdinputselection = getSelectedText();
        stopevent(event);
    });
}

function stopevent(event) {
    event.stopPropagation();
}

function inpleave(event, obj) {
    stopevent(event);
    doinpleave(obj);
}

function doinpleave(obj) {
    if (!obj) return;
    var val = $(obj).val()+"";
    var $par = $(obj).parent()[0];
    $($par).text(val);
    if ($($par).data("tov") && $($par).data("tov") != val) $($par).addClass("dataChanged");
    else if (!$($par).data("tov") && val) $($par).addClass("dataChanged");
    else $($par).removeClass("dataChanged");
    pre = null;
}

function setpreornext(event, objThis) {
    var count = -1;
    stopevent(event);
    var obj;
    if (event.keyCode == 40 || event.which == 40 || event.keyCode == 38 || event.which == 38 || event.keyCode == 13 || event.which == 13|| event.keyCode == 37 || event.which == 37|| event.keyCode == 39 || event.which == 39) {
       count = parseInt($(objThis).parent().data("i"));
        if (event.keyCode == 40 || event.which == 40) {
            obj = $(objThis).parent().parent().next("tr").find("td" + tdclass).get(count);
        } else if (event.keyCode == 38 || event.which == 38) {
            obj = $(objThis).parent().parent().prev("tr").find("td" + tdclass).get(count);
        } else if (event.keyCode == 13 || event.which == 13) {
            obj = $(objThis).parent().parent().find("td" + tdclass).get(count + 1);
        }
        else if (event.keyCode == 37 || event.which == 37) {          
            if($(objThis).val().length==0||getSelectionStart(objThis)==0&&(tdinputselection!=$(objThis).val())){
                obj = $(objThis).parent().parent().find("td" + tdclass).get(count - 1);
            }
        }
        else if (event.keyCode == 39 || event.which == 39) {
            if ($(objThis).val().length == 0 || getSelectionStart(objThis) == $(objThis).val().length && (tdinputselection != $(objThis).val()))
                obj = $(objThis).parent().parent().find("td" + tdclass).get(count + 1);
        }
        if (obj) {
            doinpleave(objThis);
            switchtdinput(obj);
        }
    }
    if (event.keyCode == 13 || event.which == 13) return false;
    else return true;

}

注意：在你自定义js之前必须加载jquery.js

<script type="text/javascript" src="${basePath}pages/excel/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${basePath}pages/excel/js/readExcel.js"></script>

源码下载