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>
源码下载
分享到:
相关推荐
双击空白或者文字变成input框修改内容: html代码 <td class=center xss=removed>{...js代码 //双击修改 function ShowElement(element,abc){ // console.log(abc); var list = abc; var me = element; var oldht
JavaScript实现简单购物小表格 本文实例为大家分享了JavaScript实现简单购物小表格的..."> <td><input type="checkbox"class="all"/></td> <td style="text-align: center; width: 200px;">商品</td> <td style="c
效果图一般般,样式随便写的,主要看功能以及实现方法 代码加解释 1、HTML部分 首先布局,把要做的样子写出来,为每一个按键绑定一个点击事件 <div id="box"> <table> <tr> <td><input type="button"value=...
body, td, input, textarea { font-family:Arial; font-size:12px; } </style> <script type="text/javascript"> //用于创建XMLHttpRequest对象 function createXmlHttp() { //根据window.XMLHttpRequest...
<td u00a0width=10%> height u00a0border=1> <td><input type=button name=Submit3 value=最上 onClick=moveFirst()></td> <td><input type=button name=Submit value=向上 ...
javascript特效,有:菜单特效、窗口特效、时间特效、图片特效、文字特效…… 例子:仿真计算器代码 <style type="text/css"> <!-- body {font-family: helvetica} p {font-size: 12pt} .red {color: red} ...
简单的表格: 代码如下: <table> <tr> <td id=...结果为4 百思不得其解,阅读相关资料后,发现原来JS中,空格也是作为一个文本节点,而两个input元素后面都有空格 所以都作为一个文本节点,所以结果为4 删除空格后结果为2 为
利用js来验证文本框的值 代码如下: [removed] function onblurs(){ if(frm.name.value==””){ alert(“请输入您的名字!”); }else if(frm.funny.value==””){ alert(“爱好不得为空哦!”); } } ...
javascript 播放器 控制 发表:不详 阅读: 37 次 关键字:不详 字体:[大 中 小] 详细参数可查询MSDN http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay/mmp_sdk/settingsobject.asp <!...
html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title></title> </head> &...
这里基于js技术,是一款很好用的js时间控件。例如时间为期一个月代码如下: 开始日期 <td> <input type="text" name="*" onFocus="WdatePicker({maxDate:'%y-%M-%d %H:%m:%s',dateFmt:'yyyy-MM-dd HH:mm:ss'})" ...
<INPUT CHECKED name=myselect onclick=javascript:this.form.myselectvalue.value=0; type=radio value=0> <SPAN class=f12><FONT color=#0000cc style="FONT-SIZE: 12px">网页</FONT></SPAN> <INPUT name=...
代码如下: <!... <head> <... charset=utf-8″> <...远程网页源代码读取<... /* 页面字体样式 */ body, td, input, textarea { font-family:Arial; font-size:12px; } </style> <script type
废话不多说了,直接给大家贴代码了,具体代码如下所示: 交易时间开始:</th> <td><input id=bcconDateBeginDate name=bcconDateBeginDate value=2016/06/12 00:00:00 class=easyui-datetimebox editable=false ...
本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>14th_test</title> <meta charset=gb2312> </head> &...
<td width="202" height="84">("web_firstpage")%>">("web_logo")%>" alt="logo" name="logo" width="200" height="60" border="0" id="logo" /></a></td> <td width="665"> </td> <td width="889" ...
// <td _ext="js">Scroller.js</td> // <td align="center">2008/9/23</td> // <td align="right" _order="2560">2.5 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center">...
雅虎TAB效果代码 ; charset=gb2242"> 魏金梁" /> 魏金梁" /> <title>nightjass 魏金梁 body {background: #fff;font-family: "Lucida Grande", Helvetica, Arial, sans-serif;font-size: 12px;} p {line-height:...
本文实例为大家分享了js实现全选和全不选的具体代码,供大家参考,具体内容如下 非常简洁的几行原生js实现全选和全不选,大神们可以在此基础上加上反选功能。 <!DOCTYPE html> <html> <head> <...
删除行 代码如下:[removed] function del(obj) { obj[removed][removed].removeNode(true); } [removed] <body> <td>单元格1</td> <td><input type=button value=”delete this row” ...