首页 博客列表 精选博客 智能问答 chat-GPT 关于我
用js实现表格数据管理
发布日期：2021-07-20 21:49:19 浏览次数：12 分类：技术文章

本文共 10516 字，大约阅读时间需要 35 分钟。

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

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

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

先看下运行的效果图：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
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.onclick=
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();
            
}
        
}
    
};
};

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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元素 -->
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>操作</th>
            </tr>
            <!-- 下面为数据的格式的例子，只有这种格式才能保证与js的正确交互 -->
            <!--
            <tr>
                <td><span>null</span></td>
                <td><span>null</span></td>
                <td><span>null</span></td>
                <td><a href="javascript:;">Del</a></td>
            </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>

转载地址：https://blog.csdn.net/lifan_3a/article/details/8793878 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：DIV+CSS圆角边框
下一篇：JavaScript中应用Object

发表评论

最新留言

第一次来，支持一个
[***.219.124.196]2024年09月06日 01时34分10秒

关于作者

    喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！

推荐文章

iOS 第4课 UILabel 2019-05-24
[已解决]junit.framework.AssertionFailedError: No tests found in 2019-05-24
“服务器端跳转”和“客户端跳转”的区别 2019-05-24
Datatables基本初始化——jQuery表格插件 2019-05-24
Servlet监听器——实现在线登录人数统计小例子 2019-05-24
Oracle笔记——简单查询语句 Oracle入门 2019-05-24
基于Hibernate和Struts2的用户管理系统小案例 2019-05-24
打开.class文件的方法 2019-05-24
基于windows平台Git+GitHub+Hexo搭建个人博客（一） 2019-05-24
基于windows平台Git+GitHub+Hexo搭建个人博客（二） 2019-05-24
Windows平台下SVN安装配置及使用 2019-05-24
python简便的编辑工具：jupyter notebook 2019-05-24
使用pip安装的时候出现 ModuleNotFoundError: No module named ‘pip‘ 2019-05-24
Selenium自动化测试（八）之上传文件 2019-05-24
Selenium UI自动化（Java篇） 2019-05-24
使用Fiddler模拟弱网进行测试 2019-05-24
使用POI读取Excel测试用例 2019-05-24
记一次数据推送的异常解决端口解决 2019-05-24
linux、mysql、nginx、tomcat 性能参数优化 2019-05-24
Nginx使用Linux内存加速静态文件访问 2019-05-24
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 369364409 位访客
访问时间: 2024-09-18 05:53:22 访问IP: 3.236.100.210     Copyright © 2020 - 2023 blog.css8.cn 京ICP备2021015314号-1 手机版