- 浏览: 243024 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
di1984HIT:
写的不错。
使用JDBC进行批处理 -
huyuran:
...
使用JDBC进行批处理 -
chenbo0928:
[url][/url][img][/img][*]引用 ...
Removing a detached instance -
mousepc:
gklovejava 写道Utility method to ...
eclipse中的get/set功能的一个bug -
gklovejava:
Utility method to take a string ...
eclipse中的get/set功能的一个bug
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>JavaScript仿Excel表格演示</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <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; } 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("您所请求的页面有异常。"); } } } } //表格变色 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><A id=Bt_selectAll>全选</A></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=C1></TD> <TD><INPUT name=C2></TD> <TD><INPUT name=C3></TD> <TD><INPUT name=C4></TD> <TD><INPUT name=C5></TD> <TD><INPUT name=C6></TD> <TD><INPUT name=C7></TD> <TD><INPUT name=C8></TD> <TD><INPUT name=C9></TD> <TD><INPUT name=C10></TD> <TD><INPUT name=C11></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><A id=Bt_copySelect>复制所选</A></TD> <TD width=537><A id=Bt_delSelect>删除所选</A></TD> <TD width=537><A id=Bt_allclear>清除所有</A></TD> <TD width=537><A id=Bt_sendData>提交数据</A></TD> <TD width=38> </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- MyHtml.7z (4.2 KB)
- 下载次数: 10
发表评论
-
struts2使用jQuery Ajax简单配置
2012-02-20 09:59 1457写的比较简单。 jsp 页面: javascript部分: ... -
struts json ajax action 结合
2011-09-05 00:05 1257首先,我的例子是从这 ... -
AJAX 连接数据库实例
2011-05-09 23:00 1354本例子连接的是ORACLE数据库。 -
一个ajax例子
2011-05-02 14:23 736<!DOCTYPE HTML PUBLIC &qu ... -
一个ajax例子(用数据库)
2011-04-23 18:38 617就是一个判断用户名是否已经注册的小例子。通过数据库。
相关推荐
本文将详细解析使用jQuery和ajax技术来实现动态添加表格行(tr)和单元格(td)功能的方法。 #### 1. 理解jQuery和ajax技术 **jQuery**是一个快速、简洁的JavaScript库,它封装了许多常用的功能,简化了JavaScript...
JavaScript(js)作为客户端脚本语言,使得我们能够实现表格的动态交互功能,如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中,`<table>`元素用于创建表格,但...
1. **动态添加行**: - 使用jQuery,可以获取表格引用,例如`$("#myTable")`,其中`#myTable`是表格的ID。 - 创建新的`<tr>`元素,可以使用`$('<tr>')`,然后添加`<td>`元素。 - 添加内容,例如`$('<td>').html('...
"动态表格-添加删除行"这个主题涉及到的技术主要是JavaScript库AutoTable,它允许开发者在HTML页面上创建功能丰富的表格,并且支持动态操作,如添加和删除行。下面我们将详细探讨AutoTable的使用、动态操作行的方法...
在开发Web应用时,动态添加和删除表格行是常见的需求,尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能,为初学者提供一个基础的实践指导。 首先,我们要了解...
在动态添加行时,`.append()`会被用来将新的行元素插入到表格中;而在删除行时,`.remove()`则用于移除选定的行。 5. **动态创建元素**:在添加行时,通常需要创建新的`<tr>`元素,并填充相应的`<td>`。这可以通过...
此外,还可以扩展这个功能,比如添加验证、编辑和删除行的功能,或者使用AJAX从服务器获取数据并动态插入。这需要更深入地理解DOM操作和JavaScript事件处理。 总结来说,"表格动态插入行"是JavaScript在网页开发中...
在本项目“ajax表格增删”中,我们聚焦于如何利用Ajax实现类似销售订单的表格的动态操作,包括添加新行和删除行的功能。此外,可能还涉及到其他增强用户体验的功能。这里,我们将深入探讨Ajax的基础,以及它如何应用...
表格动态添加、删除行,ajax提交
使用Ajax创建动态表格及各种样式,可以方便了解Ajax的用处及好处
这个"动态表格,可查询、新建、编辑、保存等,Ajax操作.rar"压缩包文件提供了一个实现此类功能的示例,它利用Ajax技术和JavaScript语言,以仿Vista按钮风格来提升用户体验。 首先,我们要理解什么是Ajax...
本资源“Layui表格行添加编辑删除操作和保存数据代码.zip”包含了一个完整的示例,演示了如何在Layui表格中实现动态的行添加、编辑和删除功能,并且将这些操作与数据保存相结合。下面我们将详细探讨这些知识点。 ...
标题和描述均提到了“21个新奇漂亮的AjaxCSS表格设计”,这表明文章旨在介绍一系列结合了Ajax和CSS技术的创新表格设计方案。Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术,它允许网页...
在实际应用中,你可能需要根据需求自定义数据填充、验证输入以及处理更复杂的逻辑,例如在添加行时从服务器获取数据,或者在删除行时确认操作。此外,还可以使用jQuery的动画效果使操作更具视觉吸引力。 总结起来,...
在使用JQuery来实现动态表格增加行的场景中,主要涉及到的技术点包括: 1. DOM操作:文档对象模型(DOM)允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中,DOM操作用于动态地向表格中插入新的...
《jPage:jQuery AJAX表格动态分页实现详解》 在网页开发中,数据展示往往涉及到大量的数据处理,尤其是在用户交互时,如何优雅地处理大量数据的分页展示,成为了提升用户体验的关键。jPage是一款基于jQuery的插件...
本案例主要探讨如何利用jQuery为HTML表格动态添加行并实现删除功能,这对于构建交互性强的数据展示页面至关重要。 首先,我们需要理解HTML表格的基本结构。一个简单的表格由`<table>`元素开始,内部包含`<tr>`...
总的来说,"jQuery表格编辑添加删除行代码"提供了一套完整的解决方案,让开发者能够在网页或应用中轻松实现动态表格功能。通过结合HTML、CSS和JavaScript,特别是jQuery的强大功能,可以实现高度交互的表格,同时...
在IT行业中,尤其是在Web开发领域,表格是一种常用的数据展示方式,用户经常需要对表格中的行进行动态添加或删除操作。这篇博文"表格行记录动态增加和删除"主要探讨了如何在网页应用中实现这一功能,这通常是通过...