智能表格

  作者 llinzzi

  版本 0.9

  说明:

  当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行

  选择checkbox,可以进行复制,删除

  双击表格会出现菜单,自动收集该列已存在数据,选中自动填充  这里是亮点

  数据发送采用ajax(自定义的一个ajax类,blog已发布过)一行一行的发送

  兼容IE6和Firefox1.5 符合W3C

  本表格一切功能都是为了减少输入录入工作,适合大项目开放使用

  

复制代码 代码如下:

  <!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 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>

  

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