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

最新推荐文章于 2019-08-12 22:58:16 发布
最新推荐文章于 2019-08-12 22:58:16 发布
阅读量426 收藏 1
点赞数
文章标签： ajax function javascript border xmlhttprequest input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinodier/article/details/1901887
版权
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>
<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 _fcksavedurl=""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>
 
晓梦庄子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
PHP Ajax实现表格实时编辑
10-19
本篇文章将介绍如何使用PHP和Ajax技术实现表格的实时编辑功能，这种功能可以极大地提升用户体验，无需刷新页面即可完成对表格数据的增删改查操作。 首先，我们需要理解Ajax的核心概念。Ajax（Asynchronous ...
Ajax实现智能表格(适合B/S模式项目的录入页面)
爱莎可实验室
10-24 1684
Ajax实现智能表格(适合BS模式项目的录入页面)说明:当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行选择checkbox,可以进行复制,删除双击表格会出现菜单,自动收集该列已存在数据,选中自动填充 这里是亮点数据发送采用ajax(自定义的一个ajax类,blog已发布过)一行一行的发送兼容IE6,IE7和Firefox1.5 符合W3C本表格一切功能都是为了减少输
BootstrapTable自定义ajax方法
csdnluolei
11-17 2万+
bootstrapTable可以自定义ajax方法，通过ajax请求获得数据返回展示在bootstrapTable表格中，这种方式我自认为比较简单常用。本篇还加了简单增删改操作，获得表格选中的数据，以及按钮可用与否。这些比较常用。 index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charse...
B/S基础学习（二）---HTML（3）表单表格
zzxixin的博客
08-12 183
一 表格的固定格式 < table width=“500” height=“300” border=“1” cellspacing=“0” cellpadding=“10”> < caption>人员信息表< /caption>必须写在table里面，表示表格的标题 < tr> < th>姓名< /th>< th...
Ajax实现表格中信息不刷新页面进行更新数据
10-17
本例中，我们将探讨如何使用Ajax实现在表格中不刷新页面的情况下更新数据。 首先，我们需要一个HTML结构来展示表格。在给定的代码中，可以看到一个简单的表格，包含两行两列的数据。表格的HTML结构如下： ```html ...
使用Ajax实现页面表格添删改查的异步刷新操作
10-20
"使用Ajax实现页面表格添删改查的异步刷新操作"是一个实用的技术实现，它允许用户在不刷新整个页面的情况下更新表格内容，从而提高页面响应速度和用户体验。 首先，我们需要理解AJAX的基本原理。AJAX通过JavaScript...
JS+Ajax实现百度智能搜索框
10-19
现在遇到这样的需求，要求输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。下面小编给大家分享同js和ajax实现百度智能搜索框，需要的的朋友参考下实现代码
B/S模式（同步）AJAX技术（异步）
Developer of XingKong22star
09-28 1871
B/S模式（同步）AJAX技术（异步）
B/S架构快速开发平台如何用代码实现登陆
快速开发平台
04-01 1452
有时候我们可能要从别的系统直接登录到ES2007的Web系统中，并且可以希望利用原来系统的登录信息直接登录。<br />java中，利用com.egosystems.exkernel.Common类的<br />public static boolean CheckUser(String username, String pwd,boolean saveInfo )<br />方法即可实现，.NET类似。<br /><br />例如，我们要在A系统中通过一个超链接直接在B系统中，可以这样：<br />A系统
ajax提交整个表格数据至后台，带回显
热门推荐
u014520797的专栏
02-02 2万+
1、问题描述，将一个table中的数据整个提交至后台转换成list 2、主要功能： 1)、表格数据json提交后台转成list，jsonObject 2)、后台list数据回显至前端表格， 3)、表格带增加行删除行功能， 4)、select元素回显 5)、jQuery ajax submit提交 3、前端提交表格数据 <%@ page language="jav
Ajax查询助手：提升BS项目开发效率
接着，Ajax引擎使用JavaScript解析这些数据，并将其动态地插入到页面的特定区域，如Div或表格中。 在Ajax查询助手的设计理念中，强调的是模块化和可重用性。查询助手作为一个中间层，负责接收和处理Ajax请求，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晓梦庄子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值