这篇文章给大家分享的是有关如何使用JavaScript实现表格数据管理的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
昌黎网站建设公司创新互联,昌黎网站设计制作，有大型网站制作公司丰富经验。已为昌黎上1000+提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的昌黎做网站的公司定做！
用JavaScript 实现了表格数据管理的以下几个功能：
· 点击添加按钮可以添加一个空的可以修改的记录。
· 点击表格单元格可以修改文本。
· 修改后实现了保存的接口。
· 如果添加了新的记录而未做任何修改值都为null，保存全部时将被忽略。
· 保存全部时只保存修改过的值，原有的数据不再重复保存。
· 刷新时如果数据未保存则提示保存。
· 点击删除时如果是临时添加的无效数据则直接删除，如果保存过的记录则实现了记录删除的接口。
考虑到嵌套的比较多就没有使用form表单，用JavaScript 直接解析dom来分离出了要传递的数据。
先看下运行的效果图：
JavaScript 的代码如下，其中注释较多就不解释了：
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=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调用时要传几个参数，有几个参数为函数，每个参数都有注释，调用代码如下：
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都是需要自己实现的，这与后台的实现相关，与本例子也没有主要关系也就不实现了，只把要传的数据传过来供使用。
感谢各位的阅读！关于“如何使用JavaScript实现表格数据管理”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
网站栏目：如何使用JavaScript实现表格数据管理
本文来源：http://www.cdkjz.cn/article/jidpch.html
