用js实现表格数据管理

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

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

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

先看下运行的效果图：

js的代码如下，其中注释较多就不解释了：

var JCRUD=function(tb,colnum,saveAllBtn,add,ajaxSaver,allAjaxSaver,ajaxDeler){var del = tb.getElementsByTagName('a');var span = tb.getElementsByTagName('span');var ctr=[];/* 保存修改的tr对象 */var delEvent = function(){var dder = this.parentNode.parentNode;this.data=[];for(var i=0; i<dder.children.length-1; i++)this.data[i] = dder.children[i].children[0].firstChild.nodeValue;var tag = 0;for(var j=0; j<this.data.length; j++){if(this.data[j]!=='null'){/* 如果修改了单元格的默认值，这里也做相应修改 */tag=1;break;}}for(var k=0; k<ctr.length; k++) if(ctr[k]===dder) ctr.splice(k,1);dder.parentNode.removeChild(dder);if(tag==1) ajaxDeler.call(this);};var spanEvent = function(){/* 点击生成修改框 */var value = this.firstChild.nodeValue;var input = document.createElement('input');input.value = value;this.parentNode.appendChild(input);this.parentNode.removeChild(this);input.focus();input.onblur = function(){/* 失去焦点移除修改框 */var span = document.createElement('span');span.appendChild(document.createTextNode(this.value?this.value:'null'));/* 如果修改了单元格的默认值，这里也做相应修改 */span.onclick =spanEvent;this.parentNode.appendChild(span);this.parentNode.removeChild(this);if(value!=this.value){/* 如果内容改变生成保存按钮 */var tr = span.parentNode.parentNodetds = tr.children;btns = tds[colnum-1].getElementsByTagName('a');for(var i=0; i<btns.length; i++){if(btns[i].firstChild.nodeValue!='保存'){var saver = document.createElement('a');saver.href="javascript:;";saver.appendChild(document.createTextNode('保存'));}else{var saver = btns[i];}}tds[tds.length-1].appendChild(saver);var tag=0;for(var k=0; k<ctr.length; k++)if(ctr[k]===tr) tag=1;if(tag==-0) ctr.push(tr);saver.οnclick=function(){/* 添加保存处理事件 */this.data = [];for(var i=0; i<tds.length-1; i++)this.data[i] = this.parentNode.parentNode.children[i].children[0].firstChild.nodeValue;ajaxSaver.call(this);for(var i=ctr.length-1; i>=0; i--){if(this.parentNode.parentNode===ctr[i]){ctr.splice(i,1);}}this.parentNode.removeChild(this);};}}};for(var i in del) del[i].onclick = delEvent;/* 给现在有元素添加事件 */for(var j in span) span[j].onclick = spanEvent;add.onclick = function(){var tbody = tb.children[0];var tr = document.createElement('tr');for(var j=0; j<colnum; j++){var td = document.createElement('td');if(j==(colnum-1)){var del = document.createElement('a');del.href='javascript:;';del.appendChild(document.createTextNode('删除'));del.onclick = delEvent;/* 给新加元素添加事件 */td.appendChild(del);}else{var span = document.createElement('span');span.appendChild(document.createTextNode('null'));/* 如果在添加时修改默认值，在这里修改的 */td.appendChild(span);span.onclick =spanEvent;}tr.appendChild(td);}tbody.appendChild(tr);};var getAllData = function(){/* 保存全部的数据解析 */var allData=[];for(var i=0; i<ctr.length; i++){allData[i]=[];for(var j=0; j<ctr[i].children.length-1; j++)allData[i].push(ctr[i].children[j].children[0].firstChild.nodeValue);ctr[i].children[colnum-1].removeChild(ctr[i].children[colnum-1].children[1]);}ctr=[];return allData;};saveAllBtn.onclick = function(){/* 添加保存全部数据保存事件 */this.allData = getAllData();if(this.allData.length){allAjaxSaver.call(this);}else{alert('No data!');}};window.onbeforeunload = function(){/* 刷新提示保存数据 */if(ctr.length){var y = confirm('数据还未保存，是否保存数据？')if(y){saveAllBtn.click();}}};
};

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

window.onload = function(){var table = document.getElementById('tb'),/* 要操作的表格 */colnum = 5,/* 这里修改表格的列数 */saveAllBtn = document.getElementById('SaveAll'),/* 保存全部的按钮 */addBtn = document.getElementById('Add'),/* 添加的按钮 */saver = function(){/* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成JSON */alert('要传的数据为data数据："'+this.data+'"此处调用ajax实现后台保存！实现略……');},allSaver = function(){/* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成JSON */alert('要传的数据为allDtat数组："'+this.allData+'"此处调用ajax实现后台保存！实现略……');},deler = function(){/* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成JSON */alert('要传的数据为data数据："'+this.data+'"此处调用ajax实现后台删除！实现略……');};window.JCRUD(table,colnum,saveAllBtn,addBtn,saver,allSaver,deler);
};

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

下面做了一个比较完整的例子，可以修改一下，实际看一下运行效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <title>Model</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-language" content="zh-CN" /> <style type="text/css" media="all"> div { width:80%;margin:auto; } table { margin:15px 0; } th, tr { width:20%; }/* 修改这里，如果表格有三列就是33.333%，四列就是25% */ span { display:block;line-height:100%; }/* 使点击整个单元格都有效果 */ table input { width:98%; } table a { float:left; margin:0 3px; } </style> <script type="text/javascript"> //<![CDATA[ var JCRUD=function(tb,colnum,saveAllBtn,add,ajaxSaver,allAjaxSaver,ajaxDeler){ var del = tb.getElementsByTagName('a'); var span = tb.getElementsByTagName('span'); var ctr=[];/* 保存修改的tr对象 */ var delEvent = function(){ var dder = this.parentNode.parentNode; this.data=[]; for(var i=0; i<dder.children.length-1; i++) this.data[i] = dder.children[i].children[0].firstChild.nodeValue; var tag = 0; for(var j=0; j<this.data.length; j++){ if(this.data[j]!=='null'){/* 如果修改了单元格的默认值，这里也做相应修改 */ tag=1; break; } } for(var k=0; k<ctr.length; k++) if(ctr[k]===dder) ctr.splice(k,1); dder.parentNode.removeChild(dder); if(tag==1) ajaxDeler.call(this); }; var spanEvent = function(){/* 点击生成修改框 */ var value = this.firstChild.nodeValue; var input = document.createElement('input'); input.value = value; this.parentNode.appendChild(input); this.parentNode.removeChild(this); input.focus(); input.onblur = function(){/* 失去焦点移除修改框 */ var span = document.createElement('span'); span.appendChild(document.createTextNode(this.value?this.value:'null'));/* 如果修改了单元格的默认值，这里也做相应修改 */ span.onclick =spanEvent; this.parentNode.appendChild(span); this.parentNode.removeChild(this); if(value!=this.value){/* 如果内容改变生成保存按钮 */ var tr = span.parentNode.parentNode tds = tr.children; btns = tds[colnum-1].getElementsByTagName('a'); for(var i=0; i<btns.length; i++){ if(btns[i].firstChild.nodeValue!='保存'){ var saver = document.createElement('a'); saver.href="javascript:;"; saver.appendChild(document.createTextNode('保存')); }else{ var saver = btns[i]; } } tds[tds.length-1].appendChild(saver); var tag=0; for(var k=0; k<ctr.length; k++) if(ctr[k]===tr) tag=1; if(tag==-0) ctr.push(tr); saver.οnclick=function(){/* 添加保存处理事件 */ this.data = []; for(var i=0; i<tds.length-1; i++) this.data[i] = this.parentNode.parentNode.children[i].children[0].firstChild.nodeValue; ajaxSaver.call(this); for(var i=ctr.length-1; i>=0; i--){ if(this.parentNode.parentNode===ctr[i]){ ctr.splice(i,1); } } this.parentNode.removeChild(this); }; } } }; for(var i in del) del[i].onclick = delEvent;/* 给现在有元素添加事件 */ for(var j in span) span[j].onclick = spanEvent; add.onclick = function(){ var tbody = tb.children[0]; var tr = document.createElement('tr'); for(var j=0; j<colnum; j++){ var td = document.createElement('td'); if(j==(colnum-1)){ var del = document.createElement('a'); del.href='javascript:;'; del.appendChild(document.createTextNode('删除')); del.onclick = delEvent;/* 给新加元素添加事件 */ td.appendChild(del); }else{ var span = document.createElement('span'); span.appendChild(document.createTextNode('null'));/* 如果在添加时修改默认值，在这里修改的 */ td.appendChild(span); span.onclick =spanEvent; } tr.appendChild(td); } tbody.appendChild(tr); }; var getAllData = function(){/* 保存全部的数据解析 */ var allData=[]; for(var i=0; i<ctr.length; i++){ allData[i]=[]; for(var j=0; j<ctr[i].children.length-1; j++) allData[i].push(ctr[i].children[j].children[0].firstChild.nodeValue); ctr[i].children[colnum-1].removeChild(ctr[i].children[colnum-1].children[1]); } ctr=[]; return allData; }; saveAllBtn.onclick = function(){/* 添加保存全部数据保存事件 */ this.allData = getAllData(); if(this.allData.length){ allAjaxSaver.call(this); }else{ alert('No data!'); } }; window.onbeforeunload = function(){/* 刷新提示保存数据 */ if(ctr.length){ var y = confirm('数据还未保存，是否保存数据？') if(y){ saveAllBtn.click(); } } }; }; window.onload = function(){ var table = document.getElementById('tb'),/* 要操作的表格 */ colnum = 5,/* 这里修改表格的列数 */ saveAllBtn = document.getElementById('SaveAll'),/* 保存全部的按钮 */ addBtn = document.getElementById('Add'),/* 添加的按钮 */ saver = function(){ /* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成JSON */ alert('要传的数据为data数据："'+this.data+'"此处调用ajax实现后台保存！实现略……'); }, allSaver = function(){ /* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成JSON */ alert('要传的数据为allDtat数组："'+this.allData+'"此处调用ajax实现后台保存！实现略……'); }, deler = function(){ /* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成JSON */ alert('要传的数据为data数据："'+this.data+'"此处调用ajax实现后台删除！实现略……'); }; window.JCRUD(table,colnum,saveAllBtn,addBtn,saver,allSaver,deler); }; //]]> </script> </head> <body> <div> <table width="100%" border="1" id="tb"> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>操作</th> </tr>   </table> <input type="button" id="SaveAll" value="保存全部" /> <input type="button" id="Add" value="添加" /> <div style="border:3px red double;padding:2px 3px;margin:8px;"> <h4 style="color:red;margin:3px;">Tip：</h4> <ul style="margin:0;"> <li>点击添加按钮可以添加一个空的可以修改的记录。</li> <li>点击表格单元格可以修改文本。</li> <li>修改后实现了保存的接口。</li> <li>如果添加了新的记录而未做任何修改值都为null，保存全部时将被忽略。</li> <li>保存全部时只保存修改过的值，原有的数据不再重复保存。</li> <li>刷新时如果数据未保存则提示保存。</li> <li>点击删除时如果是临时添加的无效数据则直接删除，如果保存过的记录则实现了记录删除的接口。</li> </ul> </div> </div> </body> </html>

P.S.：转载请注明本文原始链接。

转载于:https://www.cnblogs.com/jaiho/archive/2011/02/20/table_manager.html

用js实现表格数据管理相关推荐

js 对表格的动态操作（动态添加行，删除该行，在指定位置添加控件）
***************************************************************** js动态添加表的列,并在列中添加控件的方法<html> ...
jquery.dataTable.js 绘制表格使用详解
dataTable.js绘制表格真的是很不错,下面看看如何应用吧. 先导入dataTable.js的库吧! 定义html页面. <div><div id="result&q ...
vue表格刷新数据_Vue.js+Layer表格数据绑定与实现更新的实例
一:先使用Vue.js绑定好数据与更新事件使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据选择用户名学号班级操作 {{item.User ...
php对表格的处理,JavaScript_js处理表格对table进行修饰，js处理表格 1、行颜色间隔显示 - phpStudy...
js处理表格对table进行修饰 js处理表格 1.行颜色间隔显示 css样式:两个选择器 .one{ background-color:#33ffcc; } .two{ backgound-colo ...
（转）用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
运用多种设计模式的综合案例_SpreadJS 纯前端表格控件应用案例：表格数据管理平台...
由某科技公司研发的表格数据管理平台,是一款面向业务和企业管理系统定制开发的应用平台,包括类 Excel 设计器.PC应用端和移动应用端等应用模块.该平台具备强大的业务配置和集成开发能力,对于企业客户的 ...
html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
JS打印表格时边框缺失问题
问题描述: JS打印表格时边框缺失问题项目场景:window.print()打印网页,预览中,表格的边框缺失部分或全部原因分析: 首先,怀疑是设置了border-collapse:collapse ...

用js实现表格数据管理

用js实现表格数据管理相关推荐

最新文章

热门文章