`

Ajax实现智能表格(适合B/S模式项目的录入页面)

AjaxJavaScriptGoogleprototypeJ# 
阅读更多
Ajax实现智能表格(适合BS模式项目的录入页面)
说明:
当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行
选择checkbox,可以进行复制,删除
双击表格会出现菜单,自动收集该列已存在数据,选中自动填充 这里是亮点
数据发送采用ajax(自定义的一个ajax类,blog已发布过)一行一行的发送
兼容IE6,IE7和Firefox1.5 符合W3C
本表格一切功能都是为了减少输入录入工作,适合大项目开放使用.尤其是B/S项目

程序代码 程序代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="MSThemeCompatible" content="No">
<title>无标题文档</title> google_ad_client = "pub-4475724770859924";google_alternate_color = "FFBBE8";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "text_image";google_ad_channel ="9379930647";google_color_border = "F0F0F0";google_color_bg = "FFFFFF";google_color_link = "FF6FCF";google_color_url = "38B63C";google_color_text = "B3B3B3";
<script type="text/JavaScript">
<!--
//////////////////////////////////////////页面初始化///////////////////////////////////////
beginListen();
//////////////////////////////////////////页面初始化///////////////////////////////////////
//////////////////////////////////////////ajax类///////////////////////////////////////
function Ajax(url,recvT,stringS,resultF) {
this.url = url;
this.stringS = stringS;
this.xmlHttp = this.createXMLHttpRequest();
if (this.xmlHttp == null) {
alert("erro");
return;
}
var objxml = this.xmlHttp;
objxml.onreadystatechange = function (){Ajax.handleStateChange(objxml,recvT,resultF)};
}

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;
}

Ajax.prototype.createQueryString = function () {
var queryString = this.stringS;
return queryString;
}

Ajax.prototype.get = function () {
url = this.url;
var queryString = url+"?timeStamp=" + new Date().getTime() + "&" + this.createQueryString();
this.xmlHttp.open("GET",queryString,true);
this.xmlHttp.send(null);
}

Ajax.prototype.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);
}

Ajax.handleStateChange = function (xmlHttp,recvT,resultF) {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
resultF(recvT?xmlHttp.responseXML:xmlHttp.responseText);
} else {
alert("您所请求的页面有异常。");
}
}
}
//////////////////////////////////////////ajax类///////////////////////////////////////

//////////////////////////////////////////处理鼠标事件///////////////////////////////////////
//表格变色
var toBeColor = "#F8F9FC";
var backColor = "#FFFFFF";
function onChangTrColor(obj) {
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(obj) {
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;
}
}
}

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 table = document.getElementById("tbData");
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 beginListen(){
if(document.addEventListener){
document.addEventListener("keydown",keyDown,true);
}else{
document.attachEvent("onkeydown",keyDown);
}
}
function stopListen(){
document.detachEvent("onkeydown",keyDown);
}

//处理键盘事件
function keyDown(event){
if(event.keyCode==13){addTr()}
if(event.keyCode==46){delTr()}
}

//增加表格
function addTr() {
var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0];
var sTr = tbody.getElementsByTagName("tr")[0];
var tr = sTr.cloneNode(true);
tbody.appendChild(tr);
}

//增加表格
function addTr() {
var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0];
var trs = tbody.getElementsByTagName("tr");
var sTr = trs[trs.length-1];
var tr = sTr.cloneNode(true);
tbody.appendChild(tr);
}

//删除表格
function delTr() {
var table = document.getElementById("tbData");
var tr = table.getElementsByTagName("tr");
if(tr.length==2){return;}
var lastTr = tr[tr.length-1];
lastTr.parentNode.removeChild(lastTr);
}


//////////////////////////////////////////处理键盘操作///////////////////////////////////////

//////////////////////////////////////////处理按钮事件///////////////////////////////////////
//自动填充
var currentObj;
function showDiv(event,obj) {
var eX = event.clientX;
var eY = event.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";
currentObj = obj;
////智能菜单////
fixMenu();
//判断焦点位置
var tds = obj.parentNode.parentNode.getElementsByTagName("td");
var tdOrder;
for (var i = 0; i < tds.length; i++ ){
if(tds[i] === obj.parentNode){
tdOrder = i;
}
}
//填充标题标题
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;
var divShowInput = document.getElementById("divShowInput");
divShowInput.style.display = "none";
}

function clearInput() {
currentObj.value = "";
var divShowInput = document.getElementById("divShowInput");
divShowInput.style.display = "none";
}

function hideDiv(obj) {
obj.parentNode.style.display = "none";
}

//删除智能菜单已有数据
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 sendName = new Array("ok","A1","A2","A3","A4","A5","A6","A7","A8","A9","A10","A11");
var trs = document.getElementById("tbData").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
var sendValue = new Array();
var values = trs[i].getElementsByTagName("input");
var postString = sendName[1] + "=" + values[1].value;;
for (var j = 2; j < values.length; j++) {
postString = postString + "&" + sendName[j] + "=" + values[j].value;
}
var SendAjax = new Ajax("isave.asp",0,postString,sendok);
SendAjax.post();
function sendok(revData){
alert(revData);
}
}
}



//////////////////////////////////////////数据发送///////////////////////////////////////


//-->
</script>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #E9EDF7;
}
#tbBackground {
background-color:#FFFFFF;
text-align:center;
}
#tbData {
background-color:#DDE3EC;
}
#tbData td {
background-color:#FFFFFF;
}
#tbData input {
width:50px;
border:none;
}
#tbData .checkbox {
width:15px;
}

#tbData thead {
}

#tbTopOpt a{
display:block;
width:80px;
padding:5px;
background-color:#F8F9FC;
border:solid 1px #999999;
color:#000000;
text-decoration: none;
}
#tbTopOpt a:hover{
background-color:#DDE3EC;
}
#tbBomOpt a{
display:block;
width:80px;
padding:5px;
background-color:#F8F9FC;
border:solid 1px #999999;
color:#000000;
text-decoration: none;
}
#tbBomOpt a:hover{
background-color:#DDE3EC;
}
#tbData a{
color:#000000;
text-decoration: none;
}

#divShowInput {
position:absolute;
top:30px;
left:350px;
z-index:10;
background-color:#F8F9FC;
display:none;
border:solid 1px #DDE3EC;
width:100px;
overflow:hidden;
}
#divShowInput a {
display:block;
background-color:#F8F9FC;
color:#000000;
text-decoration: none;
text-align:center;
width:auto;
}
#divShowInput a:hover {
background-color:#DDE3EC;
border-left:solid 2px #FF0000;
border-right:solid 2px #FF0000;
color:#FF0000;
}

#divShowInput p {
cursor:hand;
margin:0;
padding:0;
background-color:#F8F9FC;
text-align:center;
border-bottom:double #DDE3EC;
}
-->
</style>
</head>

<body>
<div id="divShowInput">
<p id="barTitle" onClick="hideDiv(this)"></p>
<p id="defComP" onClick="hideDiv(this)">
<a href="javascript:void 0" onClick="clearInput()">清空</a>
</p>
<p id="autoFillP">
<a href="javascript:void 0" onClick="fillInput(this)">Llinzzi</a>
<a href="javascript:void 0" onClick="fillInput(this)">Huanhuan</a>
<a href="javascript:void 0" onClick="fillInput(this)">Tom.com</a>
<a href="javascript:void 0" onClick="fillInput(this)">超级长的长长长长长长</a>
</p>
</div>
<table id="tbBackground" width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table id="tbTopOpt" width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="40" width="125"><a href="javascript:void 0" onClick="copySelect()">复制所选</a></td>
<td width="537"><a href="javascript:void 0" onClick="delSelect()">删除所选</a></td>
<td width="38"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table id="tbData" width="750" border="0" align="center" cellpadding="0" cellspacing="1">
<thead>
<tr>
<td height="25" ><a href="javascript:void 0" onClick="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" name="checkbox" value="checkbox"></td>
<td><input name="A1" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
<td><input name="A2" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
<td><input name="A3" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
<td><input name="A4" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
<td><input name="A5" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
<td><input name="A6" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
<td><input name="A7" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
<td><input name="A8" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
<td><input name="A9" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
<td><input name="A10" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
<td><input name="A11" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><table width="700" border="0" align="center" cellpadding="0" cellspacing="0" id="tbBomOpt">
<tr>
<td height="40" width="125"><a href="javascript:void 0" onClick="copySelect()">复制所选</a></td>
<td width="537"><a href="javascript:void 0" onClick="delSelect()">删除所选</a></td>
<td width="537"><a href="javascript:void 0" onClick="sendData()">提交</a></td>
<td width="38"> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

分享到：
| 走进复苏中的美国硅谷(图)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax简单房产管理系统 B/S (原创)

    【标题】"ajax简单房产管理系统 B/S (原创)"是一个基于Web的房地产管理应用程序，它利用了Ajax技术，为用户提供了一种无需刷新整个页面即可与服务器交互的流畅体验。该系统设计简洁，对于初学者来说是了解和学习Ajax...

    使用Ajax实现页面表格添删改查的异步刷新操作

    "使用Ajax实现页面表格添删改查的异步刷新操作"是一个实用的技术实现，它允许用户在不刷新整个页面的情况下更新表格内容，从而提高页面响应速度和用户体验。 首先，我们需要理解AJAX的基本原理。AJAX通过JavaScript...

    基于吧b/s模式的聊天系统

    【标题】：“基于B/S模式的聊天系统” 【描述】：这个聊天系统是基于B/S架构（Browser/Server，浏览器/服务器模式）构建的，它并不完全成熟，但提供了基本的聊天功能，允许用户通过浏览器进行实时交流。开发者或有...

    基于B_S模式的小区物业管理系统的研究

    【基于B/S模式的小区物业管理系统的研究】 随着我国城市化进程的加速，住宅小区的数量不断增加，物业管理的需求也日益增长。然而，当前的物业管理模式普遍落后，大多仍停留在单一数据处理或手工管理阶段，难以适应...

    web QQ代码，ajax,C#,B/S

    【标题】"Web QQ代码，Ajax，C#，B/S" 涉及的主要知识点包括Web应用程序开发、前端交互技术以及后端编程语言的应用。Web QQ是一种基于浏览器的即时通讯工具，它允许用户无需下载客户端即可在网页上实现QQ聊天功能。 ...

    asp 表格特效b/s 架构

    B/S架构是目前互联网应用中最常见的模式，用户通过浏览器访问Web服务器，服务器处理请求并返回结果。 "ASP表格特效"通常指的是在ASP页面中，利用HTML、CSS和JavaScript等技术实现的表格展示和交互效果。表格是数据...

    毕业设计 基于B/S架构 购物网站的设计与实现

    【标题】：“毕业设计 基于B/S架构 购物网站的设计与实现”揭示了一个典型的软件工程项目，它涉及到构建一个Web应用程序，用于在线购物。B/S（Browser/Server，浏览器/服务器）架构是一种广泛应用的网络应用模式，...

    B/S架构学生信息管理

    B/S架构（Browser/Server，浏览器/服务器模式）是一种分布式客户端-服务器架构，它将应用逻辑主要放在服务器端，而客户端只需通过浏览器即可访问和交互。这种架构大大简化了用户的使用过程，因为用户只需要一个能够...

    C#基于b/s模式的教职工管理系统

    本项目——“C#基于B/S模式的教职工管理系统”，是利用C#语言构建的一款基于浏览器/服务器（Browser/Server，简称B/S）架构的系统，旨在实现对教职工信息的有效管理，提高教育机构的工作效率。 B/S模式是当今互联网...

    AJAX技术在B／S结构远程动力监控系统中的应用

    针对目前B／S结构的远程动力监控系统运行期间数据流量大、客户端与服务器之间的交互效率低、服务器性能开销过大、数据库眼务死锁现象等问题，提出了把AJAX技术应用在B／S结构远程动力监控系统中，论述了AJ... ...

    基于B/S模式的高校宿舍管理系统

    系统方便高校宿舍的管理.提供了人性化的功能接口.宿舍管理人员少培训或不培训即会操作.可以很好的对学生信息,宿舍信息,学生入住信息,... 本系统基于B/S模式,安装,管理,维护非常方便.应用了AJAX技术,操作响应快速,智能.

    使用java编写的b/s代码

    在本项目中，"使用java编写的b/s代码"是一个基于Java编程语言构建的Web应用程序，采用的是经典的B/S（Browser/Server）架构，也就是浏览器/服务器模式。这种架构广泛应用于现代互联网应用，用户通过浏览器即可访问和...

    b/s架构模拟网吧管理系统

    本项目“B/S架构模拟网吧管理系统”就是利用这种架构，通过浏览器作为客户端，与服务器进行交互，实现对网吧的管理功能。 【描述】：“用Java设计的一个模拟系统，所用技术包括Hibernate、EXT、DWR（Ajax）、...

    PB11.5 C/S转B/S操作方法及所需组件包

    本篇文章将详细介绍如何使用PB11.5将C/S程序转换为B/S模式，并提供所需的组件包信息。 一、PB11.5 C/S转B/S概述 C/S架构的程序通常依赖于特定客户端环境，而B/S架构则通过Web浏览器进行访问，降低了客户端的系统...

    B/S模式聊天室系统

    【B/S模式聊天室系统】是一种基于Browser/Server（浏览器/服务器）架构的实时通讯应用，主要用于实现用户之间的在线交流。这种系统的核心是利用HTTP协议进行数据传输，并且依赖于服务器端的技术处理来实现用户的交互...

    基于B/S模式的在线考试系统的设计与实现

    ### 基于B/S模式的在线考试系统的设计与实现 #### 一、引言 随着计算机网络技术的快速发展及校园网的普及，为教育信息化提供了坚实的技术基础。特别是在线考试，利用计算机技术和互联网实现了考试过程的自动化和...

    ajax实现jsp页面表格

    在本案例中，“ajax实现jsp页面表格”是一个教学示例，它展示了如何利用AJAX技术动态地从数据库获取数据，并在JSP页面的表格中展示，而无需用户感知到页面刷新。 首先，我们来理解一下JSP（JavaServer Pages）。JSP...

    运用ajax做的b/s在线聊天程序

    【标题】：“运用ajax做的b/s在线聊天程序” 在Web开发领域，B/S（Browser/Server，浏览器/服务器）架构是一种常见的模式，它允许用户通过浏览器与服务器进行交互。在这个项目中，我们看到一个基于PHP实现的在线...

    基于B/S架构的毕业设计选题系统的设计与实现

    "基于B/S架构的毕业设计选题系统的设计与实现"是一个本科毕业设计项目，主要探讨的是如何构建一个使用B/S（Browser/Server，浏览器/服务器）架构的在线毕业设计选题系统。B/S架构是一种常见的互联网应用模式，用户...

Magicbox
Global site tag (gtag.js) - Google Analytics