作者 llinzzi
版本 0.9
说明:
当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行
选择checkbox,可以进行复制,删除
双击表格会出现菜单,自动收集该列已存在数据,选中自动填充 这里是亮点
数据发送采用ajax(自定义的一个ajax类,blog已发布过)一行一行的发送
兼容IE6和Firefox1.5 符合W3C
本表格一切功能都是为了减少输入录入工作,适合大项目开放使用
复制代码 代码如下:
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script> <BR><!-- <BR>//////////////////////////////////////////页面初始化/////////////////////////////////////// <BR>beginListen(); <BR>//////////////////////////////////////////页面初始化/////////////////////////////////////// <BR>//////////////////////////////////////////ajax类/////////////////////////////////////// <BR>function Ajax(url,recvT,stringS,resultF) { <BR> this.url = url; <BR> this.stringS = stringS; <BR> this.xmlHttp = this.createXMLHttpRequest(); <BR> if (this.xmlHttp == null) { <BR> alert("erro"); <BR> return; <BR> } <BR> var objxml = this.xmlHttp; <BR> objxml.onreadystatechange = function (){Ajax.handleStateChange(objxml,recvT,resultF)}; <BR>} <br><br>Ajax.prototype.createXMLHttpRequest = function() { <BR> try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} <BR> try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} <BR> try { return new XMLHttpRequest(); } catch(e) {} <BR> return null; <BR>} <br><br>Ajax.prototype.createQueryString = function () { <BR> var queryString = this.stringS; <BR> return queryString; <BR>} <br><br>Ajax.prototype.get = function () { <BR> url = this.url; <BR> var queryString = url+"?timeStamp=" + new Date().getTime() + "&" + this.createQueryString(); <BR> this.xmlHttp.open("GET",queryString,true); <BR> this.xmlHttp.send(null); <BR>} <br><br>Ajax.prototype.post = function() { <BR> url = this.url; <BR> var url = url + "?timeStamp=" + new Date().getTime(); <BR> var queryString = this.createQueryString(); <BR> this.xmlHttp.open("POST",url,true); <BR> this.xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); <BR> this.xmlHttp.send(queryString); <BR>} <br><br>Ajax.handleStateChange = function (xmlHttp,recvT,resultF) { <BR> if (xmlHttp.readyState == 4) { <BR> if (xmlHttp.status == 200) { <BR> resultF(recvT?xmlHttp.responseXML:xmlHttp.responseText); <BR> } else { <BR> alert("您所请求的页面有异常。"); <BR> } <BR> } <BR>} <BR>//////////////////////////////////////////ajax类/////////////////////////////////////// <br><br>//////////////////////////////////////////处理鼠标事件/////////////////////////////////////// <BR>//表格变色 <BR>var toBeColor = "#F8F9FC"; <BR>var backColor = "#FFFFFF"; <BR>function onChangTrColor(obj) { <BR> obj.parentNode.style.backgroundColor = toBeColor; <BR> obj.style.backgroundColor = toBeColor; <BR> var inputs = obj.parentNode.parentNode.getElementsByTagName("input"); <BR> for (var i = 0; i < inputs.length; i++ ){ <BR> inputs[i].style.backgroundColor = toBeColor; <BR> inputs[i].parentNode.style.backgroundColor = toBeColor; <BR> } <BR>} <br><br>function outChangTrColor(obj) { <BR> obj.parentNode.style.backgroundColor = backColor; <BR> obj.style.backgroundColor = backColor; <BR> var inputs = obj.parentNode.parentNode.getElementsByTagName("input"); <BR> for (var i = 0; i < inputs.length; i++ ){ <BR> inputs[i].style.backgroundColor = backColor; <BR> inputs[i].parentNode.style.backgroundColor = backColor; <BR> } <BR>} <br><br>//////////////////////////////////////////处理鼠标事件/////////////////////////////////////// <br><br>//////////////////////////////////////////处理页面操作/////////////////////////////////////// <BR>//复制所选 <BR>function copySelect(){ <BR> var checkboxs = document.getElementsByName("checkbox"); <BR> for (var i=0; i<checkboxs.length; i++) { <BR> if(checkboxs[i].checked == true){ <BR> checkboxs[i].checked = false; <BR> copyTr(checkboxs[i]); <BR> checkboxs[i].checked = true; <BR> } <BR> } <BR>} <br><br>function copyTr(obj) { <BR> var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0]; <BR> var Str = obj.parentNode.parentNode; <BR> var tr = Str.cloneNode(true); <BR> tbody.appendChild(tr); <BR>} <br><br>//删除所选 <BR>function delSelect(){ <BR> var checkboxs = document.getElementsByName("checkbox"); <BR> var table = document.getElementById("tbData"); <BR> var tr = table.getElementsByTagName("tr"); <BR> for (var i=0; i<checkboxs.length; i++) { <BR> if(tr.length==2){ <BR> checkboxs[i].checked = false; <BR> return; <BR> } <BR> if(checkboxs[i].checked==true){ <BR> removeTr(checkboxs[i]); <BR> i=-1; <BR> } <BR> } <BR>} <br><br>function removeTr(obj) { <BR> var sTr = obj.parentNode.parentNode; <BR> sTr.parentNode.removeChild(sTr); <BR>} <br><br>//全选按钮 <BR>function selectAll() { <BR> var checkboxs = document.getElementsByName("checkbox"); <BR> var mark = true; <BR> for (var i=0; i<checkboxs.length; i++) { <BR> if (checkboxs[i].checked==false){mark = false} <BR> } <BR> if (mark){ <BR> for (var i=0; i<checkboxs.length; i++) { <BR> checkboxs[i].checked = false; <BR> } <BR> }else{ <BR> for (var i=0; i<checkboxs.length; i++) { <BR> checkboxs[i].checked = true; <BR> } <BR> } <BR>} <br><br>//////////////////////////////////////////处理页面操作/////////////////////////////////////// <br><br>//////////////////////////////////////////处理键盘操作/////////////////////////////////////// <BR>//键盘事件 <BR>function beginListen(){ <BR> if(document.addEventListener){ <BR> document.addEventListener("keydown",keyDown,true); <BR> }else{ <BR> document.attachEvent("onkeydown",keyDown); <BR> } <BR>} <BR>function stopListen(){ <BR> document.detachEvent("onkeydown",keyDown); <BR>} <br><br>//处理键盘事件 <BR>function keyDown(event){ <BR> if(event.keyCode==13){addTr()} <BR> if(event.keyCode==46){delTr()} <BR>} <br><br>//增加表格 <BR>function addTr() { <BR> var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0]; <BR> var sTr = tbody.getElementsByTagName("tr")[0]; <BR> var tr = sTr.cloneNode(true); <BR> tbody.appendChild(tr); <BR>} <br><br>//增加表格 <BR>function addTr() { <BR> var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0]; <BR> var trs = tbody.getElementsByTagName("tr"); <BR> var sTr = trs[trs.length-1]; <BR> var tr = sTr.cloneNode(true); <BR> tbody.appendChild(tr); <BR>} <br><br>//删除表格 <BR>function delTr() { <BR> var table = document.getElementById("tbData"); <BR> var tr = table.getElementsByTagName("tr"); <BR> if(tr.length==2){return;} <BR> var lastTr = tr[tr.length-1]; <BR> lastTr.parentNode.removeChild(lastTr); <BR>} <br><br><BR>//////////////////////////////////////////处理键盘操作/////////////////////////////////////// <br><br>//////////////////////////////////////////处理按钮事件/////////////////////////////////////// <BR>//自动填充 <BR>var currentObj; <BR>function showDiv(event,obj) { <BR> var eX = event.clientX; <BR> var eY = event.clientY; <BR> var sY = document.body.parentNode.scrollTop; <BR> var dY = eY + sY; <BR> var divShowInput = document.getElementById("divShowInput"); <BR> divShowInput.style.top = dY + "px"; <BR> divShowInput.style.left = eX+"px"; <BR> divShowInput.style.display = "block"; <BR> currentObj = obj; <BR> ////智能菜单//// <BR> fixMenu(); <BR> //判断焦点位置 <BR> var tds = obj.parentNode.parentNode.getElementsByTagName("td"); <BR> var tdOrder; <BR> for (var i = 0; i < tds.length; i++ ){ <BR> if(tds[i] === obj.parentNode){ <BR> tdOrder = i; <BR> } <BR> } <BR> //填充标题标题 <BR> var tdTitleTr = document.getElementById("tbData").getElementsByTagName("tr")[0]; <BR> var tdTitle = tdTitleTr.getElementsByTagName("td")[tdOrder]; <BR> document.getElementById("barTitle").innerHTML = tdTitle.innerHTML; <BR> //收集表格信息//判断重复 <BR> var trs = obj.parentNode.parentNode.parentNode.getElementsByTagName("tr"); <BR> var autoFillP = document.getElementById("autoFillP"); <BR> var bankM = true; <BR> for (var i = 0; i < trs.length; i++ ){ <BR> var inputValue = trs[i].getElementsByTagName("td")[tdOrder].getElementsByTagName("input")[0].value; <BR> if (inputValue != "") { <BR> bankM = false; <BR> var menus = autoFillP.getElementsByTagName("a"); <BR> if(menus.length > 0) { <BR> var beliveM = true; <BR> for (var j = 0; j < menus.length; j++ ){ <BR> if(menus[j].firstChild.nodeValue == inputValue) { <BR> beliveM = false; <BR> } <BR> } <BR> if(beliveM){ <BR> var Svalue = document.createElement("a"); <BR> Svalue.setAttribute("href","javascript:void 0"); <BR> Svalue.onclick = function () {fillInput(this)}; <BR> var Stext = document.createTextNode(inputValue); <BR> Svalue.appendChild(Stext); <BR> autoFillP.appendChild(Svalue); <BR> } <BR> }else{ <BR> var Svalue = document.createElement("a"); <BR> Svalue.setAttribute("href","javascript:void 0"); <BR> Svalue.onclick = function () {fillInput(this)}; <BR> var Stext = document.createTextNode(inputValue); <BR> Svalue.appendChild(Stext); <BR> autoFillP.appendChild(Svalue); <BR> } <BR> } <BR> } <BR> if(bankM) { <BR> var Svalue = document.createElement("a"); <BR> Svalue.setAttribute("href","javascript:void 0"); <BR> var Stext = document.createTextNode("数据空"); <BR> Svalue.appendChild(Stext); <BR> autoFillP.appendChild(Svalue); <BR> } <BR>} <br><br>function fillInput(obj) { <BR> currentObj.value = obj.innerHTML; <BR> var divShowInput = document.getElementById("divShowInput"); <BR> divShowInput.style.display = "none"; <BR>} <br><br>function clearInput() { <BR> currentObj.value = ""; <BR> var divShowInput = document.getElementById("divShowInput"); <BR> divShowInput.style.display = "none"; <BR>} <br><br>function hideDiv(obj) { <BR> obj.parentNode.style.display = "none"; <BR>} <br><br>//删除智能菜单已有数据 <BR>function fixMenu() { <BR> var autoFillP = document.getElementById("autoFillP"); <BR> var values = autoFillP.getElementsByTagName("a"); <BR> for (var i = values.length-1; i >= 0; i-- ){ <BR> autoFillP.removeChild(values[i]); <BR> } <BR>} <BR>//////////////////////////////////////////处理按钮事件/////////////////////////////////////// <br><br>//////////////////////////////////////////数据发送/////////////////////////////////////// <br><br>//////////////////////////////////////////数据发送/////////////////////////////////////// <BR>function sendData() { <BR> var sendName = new Array("ok","A1","A2","A3","A4","A5","A6","A7","A8","A9","A10","A11"); <BR> var trs = document.getElementById("tbData").getElementsByTagName("tbody")[0].getElementsByTagName("tr"); <BR> for (var i = 0; i < trs.length; i++) { <BR> var sendValue = new Array(); <BR> var values = trs[i].getElementsByTagName("input"); <BR> var postString = sendName[1] + "=" + values[1].value;; <BR> for (var j = 2; j < values.length; j++) { <BR> postString = postString + "&" + sendName[j] + "=" + values[j].value; <BR> } <BR> var SendAjax = new Ajax("isave.asp",0,postString,sendok); <BR> SendAjax.post(); <BR> function sendok(revData){ <BR> alert(revData); <BR> } <BR> } <BR>} <br><br><br><br>//////////////////////////////////////////数据发送/////////////////////////////////////// <br><br><BR>//--> <BR></script>
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
|
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AMJavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi
如何在浏览器中优化JavaScript代码以进行性能？Mar 18, 2025 pm 03:14 PM本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？Mar 18, 2025 pm 03:16 PM本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
jQuery矩阵效果Mar 10, 2025 am 12:52 AM将矩阵电影特效带入你的网页！这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效，只需选择一张图片，插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧，非常有趣！ 工作原理 插件将图片加载到画布上，读取像素和颜色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域，并利用jQuery计算每个区域的平均颜色。然后，使用
如何构建简单的jQuery滑块Mar 11, 2025 am 12:19 AM本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库，它基于jQuery构建，并提供许多配置选项来设置轮播。 如今，图片轮播已成为网站必备功能——一图胜千言！ 决定使用图片轮播后，下一个问题是如何创建它。首先，您需要收集高质量、高分辨率的图片。 接下来，您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计，因此使用此库构建的轮播可以适应任何
用JavaScript增强结构标记Mar 10, 2025 am 12:18 AM核心要点 利用 JavaScript 增强结构化标记可以显着提升网页内容的可访问性和可维护性，同时减小文件大小。 JavaScript 可有效地用于为 HTML 元素动态添加功能，例如使用 cite 属性自动在块引用中插入引用链接。 将 JavaScript 与结构化标记集成，可以创建动态用户界面，例如无需页面刷新的选项卡面板。 确保 JavaScript 增强功能不会妨碍网页的基本功能至关重要；即使禁用 JavaScript，页面也应保持功能正常。 可以使用高级 JavaScript 技术（
如何使用Angular上传和下载CSV文件Mar 10, 2025 am 01:01 AM数据集对于构建API模型和各种业务流程至关重要。这就是为什么导入和导出CSV是经常需要的功能。在本教程中，您将学习如何在Angular中下载和导入CSV文件
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌
热工具
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
SublimeText3汉化版
中文版，非常好用
WebStorm Mac版
好用的JavaScript开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
SublimeText3 Linux新版
SublimeText3 Linux最新版
