用JavaScript 实现表格数据管理

开发 前端 数据管理
JavaScript 是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,本文主要介绍用JavaScript 实现了表格数据管理的以下几个功能的具体办法。

用JavaScript 实现了表格数据管理的以下几个功能:

  • · 点击添加按钮可以添加一个空的可以修改的记录。
  • · 点击表格单元格可以修改文本。
  • · 修改后实现了保存的接口。
  • · 如果添加了新的记录而未做任何修改值都为null,保存全部时将被忽略。
  • · 保存全部时只保存修改过的值,原有的数据不再重复保存。
  • · 刷新时如果数据未保存则提示保存。
  • · 点击删除时如果是临时添加的无效数据则直接删除,如果保存过的记录则实现了记录删除的接口。

考虑到嵌套的比较多就没有使用form表单,用JavaScript 直接解析dom来分离出了要传递的数据。

先看下运行的效果图:

用js实现了表格数据管理

JavaScript 的代码如下,其中注释较多就不解释了:

  1. var JCRUD=function(tb,colnum,saveAllBtn,add,ajaxSaver,allAjaxSaver,ajaxDeler){  
  2.     var del = tb.getElementsByTagName('a');  
  3.     var span = tb.getElementsByTagName('span');  
  4.     var ctr=[];/* 保存修改的tr对象 */ 
  5.     var delEvent = function(){  
  6.         var dder = this.parentNode.parentNode;  
  7.         this.data=[];  
  8.         for(var i=0; i<dder.children.length-1; i++)  
  9.             this.data[i] = dder.children[i].children[0].firstChild.nodeValue;  
  10.         var tag = 0;  
  11.         for(var j=0; j<this.data.length; j++){  
  12.             if(this.data[j]!=='null'){/* 如果修改了单元格的默认值,这里也做相应修改 */ 
  13.                 tag=1;  
  14.                 break;  
  15.             }  
  16.         }  
  17.         for(var k=0; k<ctr.length; k++) if(ctr[k]===dder) ctr.splice(k,1);  
  18.         dder.parentNode.removeChild(dder);  
  19.         if(tag==1) ajaxDeler.call(this);  
  20.     };  
  21.     var spanEvent = function(){/* 点击生成修改框 */ 
  22.         var value = this.firstChild.nodeValue;  
  23.         var input = document.createElement('input');  
  24.         input.value = value;  
  25.         this.parentNode.appendChild(input);  
  26.         this.parentNode.removeChild(this);  
  27.         input.focus();  
  28.         input.onblur = function(){/* 失去焦点移除修改框 */ 
  29.             var span = document.createElement('span');  
  30.             span.appendChild(document.createTextNode(this.value?this.value:'null'));
  31. /* 如果修改了单元格的默认值,这里也做相应修改 */ 
  32.             span.onclick =spanEvent;  
  33.             this.parentNode.appendChild(span);  
  34.             this.parentNode.removeChild(this);  
  35.             if(value!=this.value){/* 如果内容改变生成保存按钮 */ 
  36.                 var tr = span.parentNode.parentNode  
  37.                     tds = tr.children;  
  38.                     btns = tds[colnum-1].getElementsByTagName('a');  
  39.                 for(var i=0; i<btns.length; i++){  
  40.                     if(btns[i].firstChild.nodeValue!='保存'){  
  41.                         var saver = document.createElement('a');  
  42.                         saver.href="javascript:;";  
  43.                         saver.appendChild(document.createTextNode('保存'));  
  44.                     }else{  
  45.                         var saver = btns[i];  
  46.                     }  
  47.                 }  
  48.                 tds[tds.length-1].appendChild(saver);  
  49.                 var tag=0;  
  50.                 for(var k=0; k<ctr.length; k++)  
  51.                     if(ctr[k]===tr) tag=1;  
  52.                 if(tag==-0) ctr.push(tr);  
  53.                 saver.onclick=function(){/* 添加保存处理事件 */ 
  54.                     this.data = [];  
  55.                     for(var i=0; i<tds.length-1; i++)  
  56.                         this.data[i] = 
  57. this.parentNode.parentNode.children[i].children[0].firstChild.nodeValue;  
  58.                     ajaxSaver.call(this);  
  59.                     for(var i=ctr.length-1; i>=0; i--){  
  60.                         if(this.parentNode.parentNode===ctr[i]){  
  61.                             ctr.splice(i,1);  
  62.                         }  
  63.                     }  
  64.                     this.parentNode.removeChild(this);  
  65.                 };  
  66.             }  
  67.         }  
  68.     };  
  69.     for(var i in del) del[i].onclick = delEvent;
  70. /* 给现在有元素添加事件 */ 
  71.     for(var j in span) span[j].onclick = spanEvent;  
  72.     add.onclick = function(){  
  73.         var tbody = tb.children[0];  
  74.         var tr = document.createElement('tr');  
  75.         for(var j=0; j<colnum; j++){  
  76.             var td = document.createElement('td');  
  77.             if(j==(colnum-1)){  
  78.                 var del = document.createElement('a');  
  79.                 del.href='javascript:;';  
  80.                 del.appendChild(document.createTextNode('删除'));  
  81.                 del.onclick = delEvent;/* 给新加元素添加事件 */ 
  82.                 td.appendChild(del);  
  83.             }else{  
  84.                 var span = document.createElement('span');  
  85.                 span.appendChild(document.createTextNode('null'));
  86. /* 如果在添加时修改默认值,在这里修改的 */ 
  87.                 td.appendChild(span);  
  88.                 span.onclick =spanEvent;  
  89.             }  
  90.             tr.appendChild(td);  
  91.         }  
  92.         tbody.appendChild(tr);  
  93.     };  
  94.     var getAllData = function(){/* 保存全部的数据解析 */ 
  95.         var allData=[];  
  96.         for(var i=0; i<ctr.length; i++){  
  97.             allData[i]=[];  
  98.             for(var j=0; j<ctr[i].children.length-1; j++)  
  99.                 allData[i].push(ctr[i].children[j].children[0].firstChild.nodeValue);  
  100.             ctr[i].children[colnum-1].removeChild(ctr[i].children[colnum-1].children[1]);  
  101.         }  
  102.         ctr=[];  
  103.         return allData;  
  104.     };  
  105.     saveAllBtn.onclick = function(){/* 添加保存全部数据保存事件 */ 
  106.         this.allData = getAllData();  
  107.         if(this.allData.length){  
  108.             allAjaxSaver.call(this);  
  109.         }else{  
  110.             alert('No data!');  
  111.         }  
  112.     };  
  113.     window.onbeforeunload = function(){/* 刷新提示保存数据 */ 
  114.         if(ctr.length){  
  115.             var y = confirm('数据还未保存,是否保存数据?')  
  116.             if(y){  
  117.                 saveAllBtn.click();  
  118.             }  
  119.         }  
  120.     };  
  121. }; 

调用时要传几个参数,有几个参数为函数,每个参数都有注释,调用代码如下:

  1. var table = document.getElementById('tb'),/* 要操作的表格 */ 
  2.     colnum = 5,/* 这里修改表格的列数 */ 
  3.     saveAllBtn = document.getElementById('SaveAll'),/* 保存全部的按钮 */ 
  4.     addBtn = document.getElementById('Add'),/* 添加的按钮 */ 
  5.     saver = function(){  
  6.         /* 此处可以加上ajax效果与数据库交互 data是个数组,需要可以改成JSON */ 
  7.         alert('要传的数据为data数据:"'+this.data+'"此处调用ajax实现后台保存!实现略……');  
  8.     },  
  9.     allSaver = function(){  
  10.         /* 此处可以加上ajax效果与数据库交互 data是个数组,需要可以改成JSON */ 
  11.         alert('要传的数据为allDtat数组:"'+this.allData+'"此处调用ajax实现后台保存!实现略……');  
  12.     },  
  13.     deler = function(){  
  14.         /* 此处可以加上ajax效果与数据库交互 data是个数组,需要可以改成JSON */ 
  15.         alert('要传的数据为data数据:"'+this.data+'"此处调用ajax实现后台删除!实现略……');  
  16.     };  
  17. window.JCRUD(table,colnum,saveAllBtn,addBtn,saver,allSaver,deler); 

可以看出saver、allSaver、deler都是需要自己实现的,这与后台的实现相关,与本例子也没有主要关系也就不实现了,只把要传的数据传过来供使用。

原文链接:http://www.cnblogs.com/jaiho/archive/2011/02/20/table_manager.html

【编辑推荐】

  1. 黑客调查:***JavaScript库是什么?
  2. JavaScript版几种常见排序算法分享
  3. JavaScript对象及继承教程之内置对象
  4. JavaScript内存回收机制深入解读
  5. JavaScript懒加载技术(lazyload)简单实现
责任编辑:陈贻新 来源: JaiHo的博客
相关推荐

2013-11-22 10:16:06

NetApp集群模式NetApp存储

2017-10-12 14:54:52

2023-08-31 16:04:16

数据管理可持续发展

2023-04-28 07:34:35

数据管理数据资产管理

2021-04-19 10:38:31

数据管理数字化转型CIO

2023-10-31 07:06:50

运营数据管理

2019-12-06 10:29:29

云原生数据公共云

2021-03-27 11:02:04

JavaScript队列编程语言

2016-11-04 12:46:25

2022-05-29 22:56:13

数据安全元数据

2013-10-31 09:19:42

混合云混合云数据管理Data

2017-01-05 18:35:57

数据管理数据治理

2022-12-14 14:33:43

云数据管理云计算

2012-10-09 10:44:49

大数据管理大数据服务器

2020-11-15 23:37:06

数据管理医疗保健数据数据库

2018-07-02 09:59:33

数据管理IT

2022-04-02 10:42:04

数据管理数据管理现代化CIO

2019-11-11 14:28:11

云计算数据IT

2024-01-16 08:09:28

PythonMongoDB数据存储

2024-02-26 09:15:05

点赞
收藏

51CTO技术栈公众号