首页 / JAVASCRIPT / AJAX仿EXCEL表格功能_javascript技巧

AJAX仿EXCEL表格功能_javascript技巧

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AJAX仿EXCEL表格功能_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5333字，纯文字阅读大概需要8分钟。

内容图文

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
 
<HTML><HEAD><TITLE>仿Excel表格演示</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<META http-equiv=MSThemeCompatible content=No> 
<SCRIPT type=text/JavaScript> 
//////////////////////////////////////////变量—初始化/////////////////////////////////////// 
var toBeColor = "#F8F9FC"; 
var backColor = "#FFFFFF"; 
var tableId = "tbData"; 
var table; 
var tbody; 
var divShowInput; 
window.onload=function(){ 
beginListen(); 
table = document.getElementById(tableId); 
tbody = table.getElementsByTagName("tbody")[0]; 
actionFill (); 
otherFill(); 
creatDiv(); 
divShowInput = document.getElementById("divShowInput"); 
} 
function creatDiv(){ 
var filldiv = document.createElement("div"); 
filldiv.setAttribute("id","divShowInput"); 
var barp = document.createElement("p"); 
barp.setAttribute("id","barTitle"); 
barp.onclick=hideDiv; 
var defComP = document.createElement("p"); 
defComP.setAttribute("id","defComP"); 
defComP.onclick=hideDiv; 
var cleara = document.createElement("a"); 
cleara.setAttribute("href","javascript:void 0"); 
cleara.onclick=clearInput; 
var clearatext = document.createTextNode("清空"); 
cleara.appendChild(clearatext); 
defComP.appendChild(cleara); 
var autoP = document.createElement("P"); 
autoP.setAttribute("id","autoFillP"); 
filldiv.appendChild(barp); 
filldiv.appendChild(defComP); 
filldiv.appendChild(autoP); 
document.body.appendChild(filldiv); 
} 
//////////////////////////////////////////变量—_初始化/////////////////////////////////////// 
//////////////////////////////////////////动作填充/////////////////////////////////////// 
function actionFill (){ 
var dbinputs = tbody.getElementsByTagName("input"); 
for (var i = 1;i<=dbinputs.length-1;i++){ 
dbinputs[i].onfocus=stopListen; 
dbinputs[i].onblur=beginListen; 
dbinputs[i].ondblclick=showDiv; 
dbinputs[i].onmouseover=onChangTrColor; 
dbinputs[i].onmouseout=outChangTrColor; 
dbinputs[i].onclick=readyedit; 
dbinputs[i].onkeydown=gonext; 
} 
} 
function otherFill (){ 
var Bt_selectAll = document.getElementById("Bt_selectAll"); 
Bt_selectAll.setAttribute("href","javascript:void 0"); 
Bt_selectAll.onclick=selectAll; 
var Bt_delSelect = document.getElementById("Bt_delSelect"); 
Bt_delSelect.setAttribute("href","javascript:void 0"); 
Bt_delSelect.onclick=delSelect; 
var Bt_copySelect = document.getElementById("Bt_copySelect"); 
Bt_copySelect.setAttribute("href","javascript:void 0"); 
Bt_copySelect.onclick=copySelect; 
var Bt_allclear = document.getElementById("Bt_allclear"); 
Bt_allclear.setAttribute("href","javascript:void 0"); 
Bt_allclear.onclick=allClear; 
var Bt_sendData = document.getElementById("Bt_sendData"); 
Bt_sendData.setAttribute("href","javascript:void 0"); 
Bt_sendData.onclick=sendData; 
} 
//////////////////////////////////////////动作填充/////////////////////////////////////// 
//////////////////////////////////////////ajax类/////////////////////////////////////// 
function Ajax(url,recvT,stringS,resultF) { 
this.url = url; 
this.stringS = stringS; 
this.xmlHttp = this.createXMLHttpRequest(); 
this.resultF = resultF; 
this.recvT = recvT; 
if (this.xmlHttp == null) { 
alert("erro"); 
return; 
} 
var objxml = this.xmlHttp; 
var othis = this; 
objxml.onreadystatechange = function (){othis.handleStateChange()}; 
} 
Ajax.prototype = { 
createXMLHttpRequest:function() { 
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} 
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} 
try { return new XMLHttpRequest(); } catch(e) {} 
return null; 
}, 
createQueryString:function () { 
var queryString = this.stringS; 
return queryString; 
}, 
get : function () { 
url = this.url; 
var queryString = url+"?timeStamp=" + new Date().getTime() + "&" + this.createQueryString(); 
this.xmlHttp.open("GET",queryString,true); 
this.xmlHttp.send(null); 
}, 
post : function() { 
url = this.url; 
var url = url + "?timeStamp=" + new Date().getTime(); 
var queryString = this.createQueryString(); 
this.xmlHttp.open("POST",url,true); 
this.xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
this.xmlHttp.send(queryString); 
}, 
handleStateChange : function () { 
var xmlhttp = this.xmlHttp; 
var recvT = this.recvT; 
var resultF = this.resultF; 
if (xmlhttp.readyState == 4) { 
if (xmlhttp.status == 200) { 
resultF.call(this,recvT?xmlhttp.responseXML:xmlhttp.responseText); 
} else { 
alert("您所请求的页面有异常。"); 
} 
} 
} 
} 
//////////////////////////////////////////ajax类/////////////////////////////////////// 
//////////////////////////////////////////处理鼠标事件/////////////////////////////////////// 
//表格变色 
function onChangTrColor(event) { 
var e = event || window.event; 
var obj = e.target || e.srcElement; 
obj.parentNode.style.backgroundColor = toBeColor; 
obj.style.backgroundColor = toBeColor; 
var inputs = obj.parentNode.parentNode.getElementsByTagName("input"); 
for (var i = 0; i < inputs.length; i++ ){ 
inputs[i].style.backgroundColor = toBeColor; 
inputs[i].parentNode.style.backgroundColor = toBeColor; 
} 
} 
function outChangTrColor(event) { 
var e = event || window.event; 
var obj = e.target || e.srcElement; 
obj.parentNode.style.backgroundColor = backColor; 
obj.style.backgroundColor = backColor; 
var inputs = obj.parentNode.parentNode.getElementsByTagName("input"); 
for (var i = 0; i < inputs.length; i++ ){ 
inputs[i].style.backgroundColor = backColor; 
inputs[i].parentNode.style.backgroundColor = backColor; 
} 
} 
//////////////////////////////////////////处理鼠标事件/////////////////////////////////////// 
//////////////////////////////////////////处理页面操作/////////////////////////////////////// 
//复制所选 
function copySelect(){ 
var checkboxs = document.getElementsByName("checkbox"); 
for (var i=0; i<checkboxs.length; i++) { 
if(checkboxs[i].checked == true){ 
checkboxs[i].checked = false; 
copyTr(checkboxs[i]); 
checkboxs[i].checked = true; 
} 
} 
actionFill (); 
} 
function copyTr(obj) { 
var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0]; 
var Str = obj.parentNode.parentNode; 
var tr = Str.cloneNode(true); 
tbody.appendChild(tr); 
} 
//删除所选 
function delSelect(){ 
var checkboxs = document.getElementsByName("checkbox"); 
var tr = table.getElementsByTagName("tr"); 
for (var i=0; i<checkboxs.length; i++) { 
if(tr.length==2){ 
checkboxs[i].checked = false; 
return; 
} 
if(checkboxs[i].checked==true){ 
removeTr(checkboxs[i]); 
i=-1; 
} 
} 
} 
function removeTr(obj) { 
var sTr = obj.parentNode.parentNode; 
sTr.parentNode.removeChild(sTr); 
} 
//全选按钮 
function selectAll() { 
var checkboxs = document.getElementsByName("checkbox"); 
var mark = true; 
for (var i=0; i<checkboxs.length; i++) { 
if (checkboxs[i].checked==false){mark = false} 
} 
if (mark){ 
for (var i=0; i<checkboxs.length; i++) { 
checkboxs[i].checked = false; 
} 
}else{ 
for (var i=0; i<checkboxs.length; i++) { 
checkboxs[i].checked = true; 
} 
} 
} 
//鼠标点击聚焦 
function readyedit(event){ 
var e = event || window.event; 
var obj = e.target || e.srcElement; 
obj.select(); 
} 
//清空 
function allClear(){ 
var inputs = tbody.getElementsByTagName("input"); 
for (var i=0;i<inputs.length;i++) { 
inputs[i].value=""; 
} 
} 
//全部删除 
function allDel(){ 
var trs = tbody.getElementsByTagName("tr"); 
//alert(trs.length); 
for(var i=1 ;i<=trs.length ;i++) { 
if(typeof(trs[i])!="undefined"){ 
tbody.removeChild(trs[i]); 
i=0; 
} 
} 
} 
//////////////////////////////////////////处理页面操作/////////////////////////////////////// 
//////////////////////////////////////////处理键盘操作/////////////////////////////////////// 
//键盘事件 
function beginListen(){ 
if(document.addEventListener){ 
document.addEventListener("keydown",keyDown,true); 
}else{ 
document.attachEvent("onkeydown",keyDown); 
} 
} 
function stopListen(){ 
if(document.removeEventListener){ 
document.removeEventListener("keydown",keyDown,true); 
}else{ 
document.detachEvent("onkeydown",keyDown); 
} 
} 
//处理键盘事件 
function keyDown(event){ 
var e = event || window.event; 
if(e.keyCode==45){addTr()} 
if(e.keyCode==46){delTr()} 
} 
//增加表格 
function addTr() { 
var sTr = tbody.getElementsByTagName("tr")[0]; 
var tr = sTr.cloneNode(true); 
tbody.appendChild(tr); 
actionFill (); 
} 
//删除表格 
function delTr() { 
var tr = table.getElementsByTagName("tr"); 
if(tr.length==2){return;} 
var lastTr = tr[tr.length-1]; 
lastTr.parentNode.removeChild(lastTr); 
} 
//移动焦点 
function gonext(event) { 
var e = event || window.event; 
var obj = e.target || e.srcElement; 
if(e.keyCode==13){ 
var nextobj = obj.parentNode.parentNode.nextSibling; 
var objindex = obj.parentNode.cellIndex; 
if(nextobj){ 
if (nextobj.nodeType==3){ 
var nextinput = nextobj.nextSibling.getElementsByTagName("input")[objindex]; 
nextinput.focus(); 
nextinput.select(); 
}else{ 
var nextinput = nextobj.getElementsByTagName("input")[objindex]; 
nextinput.focus(); 
nextinput.select(); 
} 
} 
} 
} 
//////////////////////////////////////////处理键盘操作/////////////////////////////////////// 
//////////////////////////////////////////处理按钮事件/////////////////////////////////////// 
//自动填充 
var currentObj; 
function showDiv(event) { 
var e = event || window.event; 
var obj = e.target || e.srcElement; 
var eX = e.clientX; 
var eY = e.clientY; 
var sY = document.body.parentNode.scrollTop; 
var dY = eY + sY; 
var divShowInput = document.getElementById("divShowInput"); 
divShowInput.style.top = dY + "px"; 
divShowInput.style.left = eX+"px"; 
divShowInput.style.display = "block"; 
hideListen(); 
currentObj = obj; 
////智能菜单//// 
fixMenu(); 
//判断焦点位置 
var tdOrder = obj.parentNode.cellIndex; 
//填充标题标题 
var tdTitleTr = document.getElementById("tbData").getElementsByTagName("tr")[0]; 
var tdTitle = tdTitleTr.getElementsByTagName("td")[tdOrder]; 
document.getElementById("barTitle").innerHTML = tdTitle.innerHTML; 
//收集表格信息//判断重复 
var trs = obj.parentNode.parentNode.parentNode.getElementsByTagName("tr"); 
var autoFillP = document.getElementById("autoFillP"); 
var bankM = true; 
for (var i = 0; i < trs.length; i++ ){ 
var inputValue = trs[i].getElementsByTagName("td")[tdOrder].getElementsByTagName("input")[0].value; 
if (inputValue != "") { 
bankM = false; 
var menus = autoFillP.getElementsByTagName("a"); 
if(menus.length > 0) { 
var beliveM = true; 
for (var j = 0; j < menus.length; j++ ){ 
if(menus[j].firstChild.nodeValue == inputValue) { 
beliveM = false; 
} 
} 
if(beliveM){ 
var Svalue = document.createElement("a"); 
Svalue.setAttribute("href","javascript:void 0"); 
Svalue.onclick = function () {fillInput(this)}; 
var Stext = document.createTextNode(inputValue); 
Svalue.appendChild(Stext); 
autoFillP.appendChild(Svalue); 
} 
}else{ 
var Svalue = document.createElement("a"); 
Svalue.setAttribute("href","javascript:void 0"); 
Svalue.onclick = function () {fillInput(this)}; 
var Stext = document.createTextNode(inputValue); 
Svalue.appendChild(Stext); 
autoFillP.appendChild(Svalue); 
} 
} 
} 
if(bankM) { 
var Svalue = document.createElement("a"); 
Svalue.setAttribute("href","javascript:void 0"); 
var Stext = document.createTextNode("数据空"); 
Svalue.appendChild(Stext); 
autoFillP.appendChild(Svalue); 
} 
} 
function fillInput(obj) { 
currentObj.value = obj.innerHTML; 
divShowInput.style.display = "none"; 
} 
function clearInput() { 
currentObj.value = ""; 
divShowInput.style.display = "none"; 
} 
function hideDiv() { 
divShowInput.style.display = "none"; 
stophide(); 
} 
function hideListen(){ 
if(document.addEventListener){ 
document.addEventListener("click",hideDiv,true); 
}else{ 
document.attachEvent("onclick",hideDiv); 
} 
} 
function stophide(){ 
if(document.removeEventListener){ 
document.removeEventListener("click",keyDown,true); 
}else{ 
document.detachEvent("onclick",keyDown); 
} 
} 
//删除智能菜单已有数据 
function fixMenu() { 
var autoFillP = document.getElementById("autoFillP"); 
var values = autoFillP.getElementsByTagName("a"); 
for (var i = values.length-1; i >= 0; i-- ){ 
autoFillP.removeChild(values[i]); 
} 
} 
//////////////////////////////////////////处理按钮事件/////////////////////////////////////// 
//////////////////////////////////////////数据发送/////////////////////////////////////// 
//////////////////////////////////////////数据发送/////////////////////////////////////// 
function sendData() { 
var divFoltupDiv = document.getElementById("divFoltupDiv"); 
divFoltupDiv.style.display = "block"; 
var sendokinf = document.getElementById("sendokinf"); 
var sendokBiginf = document.getElementById("sendokBiginf"); 
var sendName = new Array(); 
var trs = tbody.getElementsByTagName("tr"); 
var inputNames = trs[0].getElementsByTagName("input"); 
for (var i = 0; i < inputNames.length-1; i++) { 
sendName[i]=inputNames[i+1].getAttribute("name"); 
} 
var trnum = trs.length; 
var oknum = 0; 
for (var i = 0; i < trnum; i++) { 
var values = trs[i].getElementsByTagName("input"); 
var postStringAry = new Array(); 
for (var j = 0; j < values.length-1; j++) { 
postStringAry[j]=sendName[j]+"="+values[j+1].value; 
} 
var postString = postStringAry.join("&"); 
function sendOk(revData){ 
if(revData=="ok"){ 
oknum++; 
sendokinf.innerHTML = "已成功发送 "+oknum+" 行 共"+trnum+" 行"; 
sendokBiginf.innerHTML = trnum-oknum; 
if (trnum-oknum==0){ 
divFoltupDiv.style.display = "none"; 
allClear(); 
allDel(); 
} 
} 
} 
var SendAjax = new Ajax("isave.asp",0,postString,sendOk); 
SendAjax.post(); 
} 
} 
//////////////////////////////////////////数据发送/////////////////////////////////////// 
//--> 
</SCRIPT> 
<STYLE type=text/css>BODY { 
FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e9edf7 
} 
#tbBackground { 
BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center 
} 
#tbData { 
BACKGROUND-COLOR: #dde3ec 
} 
#tbData TD { 
BACKGROUND-COLOR: #ffffff 
} 
#tbData INPUT { 
WIDTH: 50px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none 
} 
#tbData .checkbox { 
WIDTH: 15px 
} 
#tbData THEAD { 
} 
#tbTopOpt A { 
BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #999999 1px solid; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #999999 1px solid; WIDTH: 80px; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #f8f9fc; TEXT-DECORATION: none 
} 
#tbTopOpt A:hover { 
BACKGROUND-COLOR: #dde3ec 
} 
#tbBomOpt A { 
BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #999999 1px solid; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #999999 1px solid; WIDTH: 80px; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #f8f9fc; TEXT-DECORATION: none 
} 
#tbBomOpt A:hover { 
BACKGROUND-COLOR: #dde3ec 
} 
#tbData A { 
COLOR: #000000; TEXT-DECORATION: none 
} 
#divShowInput { 
BORDER-RIGHT: #dde3ec 1px solid; BORDER-TOP: #dde3ec 1px solid; DISPLAY: none; Z-INDEX: 10; LEFT: 350px; OVERFLOW: hidden; BORDER-LEFT: #dde3ec 1px solid; WIDTH: 100px; BORDER-BOTTOM: #dde3ec 1px solid; POSITION: absolute; TOP: 30px; BACKGROUND-COLOR: #f8f9fc 
} 
#divShowInput A { 
DISPLAY: block; WIDTH: auto; COLOR: #000000; BACKGROUND-COLOR: #f8f9fc; TEXT-ALIGN: center; TEXT-DECORATION: none 
} 
#divShowInput A:hover { 
BORDER-RIGHT: #ff0000 2px solid; BORDER-LEFT: #ff0000 2px solid; COLOR: #ff0000; BACKGROUND-COLOR: #dde3ec 
} 
#divShowInput P { 
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-BOTTOM-COLOR: #dde3ec; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #f8f9fc; TEXT-ALIGN: center; BORDER-BOTTOM-STYLE: double 
} 
#divFoltupDiv { 
DISPLAY: none; Z-INDEX: 1001; RIGHT: 0px; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='gb.png'); LEFT: 0px; PADDING-BOTTOM: 300px; WIDTH: 100%; BOTTOM: 0px; PADDING-TOP: 270px; POSITION: absolute; TOP: 0px; TEXT-ALIGN: center 
} 
UNKNOWN { 
BACKGROUND-IMAGE: url(gb.png); BACKGROUND-REPEAT: repeat 
} 
P#sendokBiginf { 
FONT-SIZE: 20px; COLOR: red 
} 
</STYLE> 
<META content="MSHTML 6.00.2800.1400" name=GENERATOR></HEAD> 
<BODY> 
<DIV id=divFoltupDiv> 
<P><IMG alt=Loading src=""> 发送数据</P> 
<P id=sendokBiginf> </P> 
<P id=sendokinf> </P></DIV> 
<TABLE id=tbBackground cellSpacing=0 cellPadding=0 width=760 align=center 
border=0> 
<TBODY> 
<TR> 
<TD> </TD></TR> 
<TR> 
<TD> 
<TABLE id=tbData cellSpacing=1 cellPadding=0 width=750 align=center 
border=0> 
<THEAD> 
<TR> 
<TD height=25>全选</TD> 
<TD>A1</TD> 
<TD>A2</TD> 
<TD>A3</TD> 
<TD>A4</TD> 
<TD>A5</TD> 
<TD>A6</TD> 
<TD>A7</TD> 
<TD>A8</TD> 
<TD>A9</TD> 
<TD>A10</TD> 
<TD>A11</TD></TR></THEAD> 
<TBODY> 
<TR> 
<TD><INPUT class=checkbox type=checkbox value=checkbox 
name=checkbox></TD> 
<TD><INPUT name=A1></TD> 
<TD><INPUT name=A2></TD> 
<TD><INPUT name=A3></TD> 
<TD><INPUT name=A4></TD> 
<TD><INPUT name=A5></TD> 
<TD><INPUT name=A6></TD> 
<TD><INPUT name=A7></TD> 
<TD><INPUT name=A8></TD> 
<TD><INPUT name=A9></TD> 
<TD><INPUT name=A10></TD> 
<TD><INPUT name=A11></TD></TR></TBODY></TABLE></TD></TR> 
<TR> 
<TD> 
<TABLE id=tbBomOpt cellSpacing=0 cellPadding=0 width=700 align=center 
border=0> 
<TBODY> 
<TR> 
<TD width=125 height=40>复制所选</TD> 
<TD width=537>删除所选</TD> 
<TD width=537>清空所有</TD> 
<TD width=537>提交</TD> 
<TD width=38> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> 
<HR> 
操作方法
一 
键盘操作
1.Insert键增加一行，并复制最后一行内容，Delete键删除最后一行，该操作用以调节表格总大小；
2.Tab键横向移动光标，Enter键纵向移动光标，符合Excle用户习惯；
二 
页面操作
1.全选：选择全部行，再次执行释放全部行；
2.复制所选：复制已经选择的行及其内容；
3.删除所选：删除已经选择的行；
4.清空所选：清除所有单元格(input)中的内容；
5.提交：发送数据内容到服务器
三 
智能操作
双击单元格将弹出菜单，菜单自动收集该列上所有不重复的已输入内容，为重复输入数据提供了方便。
</BODY></HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的AJAX仿EXCEL表格功能_javascript技巧全部内容，希望文章能够帮你解决AJAX仿EXCEL表格功能_javascript技巧所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/308558.html

来源：【匿名】

【上一篇】javascript根据歌名获取播放地址和歌词内容_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【AJAX仿EXCEL表格功能_javascript技巧】教程文章相关的互联网学习教程文章

瞠目结舌的JavaScript技巧

今天在知乎上看到一篇JavaScript技巧，学习并收藏之1. 快速打印一个五分制的评分情况function getRating(rating) { if(rating > 5 || rating < 0) throw new Error(‘数字不在范围内‘); return ‘★★★★★☆☆☆☆☆‘.substring(5 - rating, 10 - rating );}2.拼接重复字符串（abcabcabc）//输出n个‘abc’拼接的字符串var str = new Array(n+1).join(‘abc‘);false => ![]true => !![]undefined => ...

javascript技巧

1.将arguments转化为数组函数中的预定义变量arguments并非一个真正的数组，而是一个类似数组的对象。它具有length属性，但是没有slice, push, sort等函数，那么如何使arguments具有这些数组才有的函数呢？也就是说如何使arguments变成一个真正的数组呢？function args(){ return [].slice.call(arguments)}var m=args(2,5,8) // [2, 5, 8]m.push(10)//可以使用数组方法console.log(m)// [2, 5, 8,10] 2.数组中的最大值var arr...

45个实用的JavaScript技巧、窍门和最佳实践

1 – 在第一次给一个变量赋值的时候不要忘记使用var关键字给一个未定义的变量赋值会导致创建一个全局变量。要避免全局变量。2 – 使用===，而不是＝＝==（或!=）操作符在需要的时候会自动执行类型转换。===（或!==）操作不会执行任何转换。它将比较值和类型，而且在速度上也被认为优于==。12345678[10] === 10 // is false[10] == 10 // is true‘10‘== 10 // is true‘10‘=== 10 // is false [] == 0 ...

看各类框架源码淘来的一些JavaScript技巧【代码】

1. 创建定长的JavaScript数组，并赋空值；出自VUE文档Render函数讲解// 创建定长20的JavaScript数组，并把每个项的值设为null Array.apply(null, { length: 20 }).map(function(v,k,ar){return ar[k] = null; })// 创建定长20的JavaScript数组，并把每个项的值设为undefined Array.apply(null, { length: 20 }).map(function(){}) 2.可靠的类型判断；var arr = [[], {}, function(){}, "", null, undefined, 0, true ];for(var i i...

原生JavaScript技巧大收集(1~10)

1、原生JavaScript实现字符串长度截取01functioncutstr(str, len) {02 vartemp;03 varicount = 0;04 varpatrn = /[^\x00-\xff]/;05 varstrre = "";06 for(vari = 0; i < str.length; i++) {07 if(icount < len - 1) {08 temp = str.substr(i, 1);09 if(patrn.exec(temp) == null) {10 icount = icount + 111 } else{12 icount = icount + 2...

javascript设计模式之解释器模式详解_javascript技巧【图】

神马是“解释器模式”？先翻开《GOF》看看Definition：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念：抽象语法树：解释器模式并未解释如何创建一个抽象语法树。它不涉及语法分析。抽象语法树可用一个表驱动的语法分析程序来完成，也可用手写的（通常为递归下降法）语法分析程序创建，或直接client提供。解析器：指的是把描述客户端调用要求...

JavaScript设计模式之单例模式实例_javascript技巧【图】

《Practical Common Lisp》的作者 Peter Seibel 曾说，如果你需要一种模式，那一定是哪里出了问题。他所说的问题是指因为语言的天生缺陷，不得不去寻求和总结一种通用的解决方案。不管是弱类型或强类型，静态或动态语言，命令式或说明式语言、每种语言都有天生的优缺点。一个牙买加运动员，在短跑甚至拳击方面有一些优势，在练瑜伽上就欠缺一些。术士和暗影牧师很容易成为一个出色的辅助，而一个背着梅肯满地图飞的敌法就会略显...

JavaScript设计模式之观察者模式（发布者-订阅者模式）_javascript技巧

观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式.代码如下: div.onclick = function click (){ alert ( ”click ) }只要订阅了div的click事件. 当点击div的时候, function click就会被触发。那么到底什么是观察者模式呢. 先看看生活中的观察者模式。好莱坞有句名言. “不要给我打电话，我会给你打电话”. 这句话就...

JavaScript设计模式之外观模式实例_javascript技巧

外观模式(门面模式)，是一种相对简单而又无处不在的模式。外观模式提供一个高层接口，这个接口使得客户端或子系统更加方便调用。用一段再简单不过的代码来表示：代码如下: var getName = function(){ return ”svenzeng” } var getSex = function(){ return ‘man } 如果你需要分别调用getName和getSex函数. 那可以用一个更高层的接口getUserInfo来调用.代码如下: var getUserInfo = function(){ var info = a() + b(); return i...

JavaScript设计模式之策略模式实例_javascript技巧

策略模式的意义是定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。一个小例子就能让我们一目了然。回忆下jquery里的animate方法.代码如下: $( div ).animate( {“left: 200px”}, 1000, ‘linear ); //匀速运动 $( div ).animate( {“left: 200px”}, 1000, ‘cubic ); //三次方的缓动这2句代码都是让div在1000ms内往右移动200个像素. linear(匀速)和cubic(三次方缓动)就是一种策略模式的封装. 再来一个例子. ...

首页 / JAVASCRIPT / AJAX仿EXCEL表格功能_javascript技巧

AJAX仿EXCEL表格功能_javascript技巧

内容导读

内容图文

内容总结

内容备注

内容手机端

【AJAX仿EXCEL表格功能_javascript技巧】教程文章相关的互联网学习教程文章

瞠目结舌的JavaScript技巧

javascript技巧

45个实用的JavaScript技巧、窍门和最佳实践

看各类框架源码淘来的一些JavaScript技巧【代码】

原生JavaScript技巧大收集(1~10)

javascript设计模式之解释器模式详解_javascript技巧【图】

JavaScript设计模式之单例模式实例_javascript技巧【图】

JavaScript设计模式之观察者模式（发布者-订阅者模式）_javascript技巧

JavaScript设计模式之外观模式实例_javascript技巧

JavaScript设计模式之策略模式实例_javascript技巧

JavaScript设计模式之外观模式介绍_javascript技巧

JavaScript设计模式之装饰者模式介绍_javascript技巧

JavaScript设计模式之抽象工厂模式介绍_javascript技巧

JavaScript设计模式之代理模式介绍_javascript技巧

JavaScript设计模式之适配器模式介绍_javascript技巧

JAVASCRIPT - 相关标签

AJAX - 相关标签

功能 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程