td 转 input js代码

来源:互联网 发布:淘宝怎么装全屏店招 编辑:程序博客网 时间:2024/05/16 16:11

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>

     源码下载

原创粉丝点击