javascript动态添加删除表格数据管理

最新推荐文章于 2023-11-30 09:18:07 发布
最新推荐文章于 2023-11-30 09:18:07 发布
阅读量4.3k 收藏 6
点赞数 1
文章标签： javascript function ajax input table null

本文和大家分享一下使用javascript动态添加删除表格数据管理，主要实现功能如下：

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

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

先看下运行的效果图：


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


xiangjun_28
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javaScript实战项目之动态表格【文末附源码】
2401_84091502的博客
04-07 888
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
JavaScript——动态增删表格
weixin_43305674的博客
10-03 215
主要使用document.getElemetById()、obj.appendChild()、obj.setAttribute()、document.createTextNode()、table.removeChild()等方法，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> &l
js实现动态添加删除表格数据的两种方式
最新发布
m0_56713342的博客
11-30 1603
思路：先把整体的html结构写出来，table表格分为3部分，其中tbody中的内容通过节点创建出来，删除时，找到其祖先元素的节点进行remove（），表单内的各个框的值对应表格的内容。思路：先把整体的效果图写出来，再通过js渲染到页面上，每次添加一组数据就相当于给数组添加数据，删除事件用事件委托，给祖先元素绑定事件，子元素触发事件会冒泡到祖先元素。
JavaScript Dom 案例-动态表格的添加和删除
Ass12454548的博客
01-24 1166
JavaScript Dom 案例-动态表格的添加和删除
＜table＞表格清除属性数据方法 js
weixin_46567616的博客
01-16 1767
表格清除属性数据方法js
JavaScript学习（六）——表格的动态添加与删除
张宜强的博客
08-03 3109
首先是去创建一个基本页面，上面有一个表格来展示信息 动态删除 步骤：为a标签设置一个点击事件，a标签的父节点是td，td的父节点是tr，tr的父节点是table，所以函数将a标签传入，通过parentNode可以获取父节点 定义删除函数 点击删除，可以删除表格的信息接下来实现如何动态添加信息步骤首先给添加按钮增加点击事件,在add方法中添加之后的所有操作 从输入框中获取到需要添加的属性 将属性转换为节点，这样才能添加到DOM树中，创建td节点，td节点中添加展示的属性，其余两个td节点是一样的操作 ...
JS动态生成表格-添加删除操作
weixin_46670235的博客
03-17 178
判断数组元素长度 添加tr 判断数组属性长度 添加td 最后创建td 添加删除链接 注册点击事件 删除该链接的父亲的父亲 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co.
JavaScript中动态向表格添加数据
10-20
在JavaScript中，动态向表格添加数据是一项常见的任务，特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作，尤其是DOM（文档对象模型）的操作。以下是对标题和描述中所涉及知识点的...
基于JavaScript实现动态添加删除表格的行
10-22
本文将详细介绍如何使用JavaScript实现动态添加和删除表格的行。在实际应用中，这样的功能常见于数据输入表单或者管理界面，用户可以根据需求增删表格行，方便数据的管理。 首先，我们来看HTML部分。一个简单的表格...
jQuery实现表单动态添加与删除数据操作示例
10-18
本示例展示了如何使用jQuery来实现表单中的动态添加和删除数据功能，这对于构建交互性较强的用户界面非常有用。以下是对这个示例的详细解释： 首先，HTML部分创建了一个简单的注册表单，包含用户名、密码和邮箱...
js动态添加删除表格
09-02
js,javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
10-26
主要介绍了操作Table--动态添加删除表格及数据实现代码，有需要的朋友可以参考一下
javascript实现动态添加删除表格行
04-13
NULL 博文链接：https://1148130696.iteye.com/blog/1726191
js 添加删除表格
03-06
js 添加删除表格 博文链接：https://huashaozhawei.iteye.com/blog/151792
原生JS和JQuery动态添加、删除表格行的方法
10-24
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
JavaScript动态添加删除表格行
03-31
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
用js实现动态添加删除表格数据
reg183的专栏
05-11 2089
代码如下： <!DOCTYPE HTML> <html> <head> <meta charset = "UTF-8"> <title>table</title > <style> table { margin:auto; width: 60%; border: 1px solid black; border-collapse: collapse; } table captio.
利用javascript动态添加表格行以及删除表格行
zhaofuqiangmycomm的博客
06-23 1887
转：https://blog.csdn.net/summerhmy/article/details/82892271 1，首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。 如图： 对应的html代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/...
动态添加删除一个表格的数据
03-29
以下是一个简单的示例，演示如何使用JavaScript动态添加和删除表格中的行： HTML代码： ``` <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Email</th> <th></th> </tr> </thead> <tbody> <tr> <td>John</td> <td>30</td> <td>john@example.com</td> <td><button onclick="deleteRow(this)">Delete</button></td> </tr> <tr> <td>Jane</td> <td>25</td> <td>jane@example.com</td> <td><button onclick="deleteRow(this)">Delete</button></td> </tr> </tbody> </table> <button onclick="addRow()">Add Row</button> ``` JavaScript代码： ``` function addRow() { var table = document.getElementById("myTable").getElementsByTagName('tbody')[0]; var newRow = table.insertRow(); var nameCell = newRow.insertCell(0); var ageCell = newRow.insertCell(1); var emailCell = newRow.insertCell(2); var deleteCell = newRow.insertCell(3); nameCell.innerHTML = "New Name"; ageCell.innerHTML = "New Age"; emailCell.innerHTML = "New Email"; deleteCell.innerHTML = '<button onclick="deleteRow(this)">Delete</button>'; } function deleteRow(btn) { var row = btn.parentNode.parentNode; row.parentNode.removeChild(row); } ``` 在此示例中，我们首先定义了一个包含表格和一个添加行按钮的HTML代码块。当单击按钮时，`addRow()`函数将在表格中添加一个新行。此函数使用`insertRow()`方法在表格中插入新行，并使用`insertCell()`方法在新行中插入单元格。最后，我们使用`innerHTML`属性设置单元格中的文本和删除按钮的HTML。 当单击删除按钮时，`deleteRow()`函数将从表格中删除所在行。此函数使用`parentNode`属性找到要删除的行，并使用`removeChild()`方法从表格中删除该行。 请注意，在添加和删除行时，我们使用`getElementsByTagName()`方法找到表格的`tbody`元素。这是因为在HTML中，`<thead>`和`<tbody>`元素都是可选的，并且在某些情况下可能不存在。但是，我们需要在表格的`tbody`元素中插入和删除行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值