原生JS实现任意数据的动态表格

昨天晚上有个女生叫我帮他看一下前端怎么通过 JQuery 向后台发送数据，今天上午刚测试完Java，下午就花了一点时间来实现动态表格案例，其实也不难，就是使用原生的JS来实现；其中有一个很奇葩的需求。他们老师说第一次访问页面时不展示数据，之后第二次访问页面的时候才向后端发送请求渲染表格数据，实现思路：在LocalStorage 存储一个首次展示的一个flag，页面加载前就获取LocalStorage中的值，判断是否需要展示数据。

成果展示：

    MOCK_DATA = [{id: 1, name: "技术部", sn: 'KFB'},{id: 2, name: "生产部", sn: 'SCB'},{id: 3, name: "测试部", sn: 'CSB'},{id: 4, name: "研发部", sn: 'YFB'},{id: 5, name: "总经办", sn: 'CEO'}];

修改 MOCK_DATA 中的数据之后的运行截图：

            MOCK_DATA = [{id: 1, name: "技术部", sn: 'KFB', hobby: "篮球"},{id: 2, name: "生产部", sn: 'SCB', hobby: "泡妞"},{id: 3, name: "测试部", sn: 'CSB', hobby: "打代码"},{id: 4, name: "研发部", sn: 'YFB', hobby: "学Java"},{id: 5, name: "总经办", sn: 'CEO', hobby: "睡觉"}];

写了一点简单的样式，直接使用就行

    *{padding:0;margin:0;}table{width:500px;margin:100px auto;border-collapse:collapse;/*边框合并模式*/text-align:center;}table caption {font-size: 24px;font-weight: 700;}
td,th{border:1px solid #333;}
td a:hover {color: blue;cursor: pointer;}tr:nth-child(2) {height:40px;background-color: #cccccc;}
button {position: absolute;top: 100px;right: 300px;}

封装的工具方法

 ``/** 创建一个指定名称的元素并返回 */function createElement(name) {return document.createElement(name);}
/*** 将指定的元素节点追加到指定的父节点上* * parentNode 父节点* currentNode 当前节点*/function append(parentNode, currentNode) {parentNode.append(currentNode);}
/** 通过 id 获取元素节点并返回 */function $(id) {return document.getElementById(id);}

创建按钮。绑定点击事件实现清除缓存的功能，清除成功之后刷新页面

function clearCache() {let clearBtn = createElement("button");clearBtn.setAttribute("id", "clearBtn");clearBtn.innerText = "清除缓存";append(document.body, clearBtn);
$('clearBtn').onclick = () => {if (! localStorage.getItem("once")) {alert("当前没有缓存要清理！");} else {const ret = confirm("确定要清除缓存吗？");if (ret) {// 清除缓存localStorage.clear();// 刷新页面location.reload();} }}}

核心代码；MOCK_DATA 是前端模拟的数据，可以是向后台发送请求得到后台响应的数据；通过 createElement方法创建 table、caption、tr、th、td等元素节点，通过 append方法将指定的元素节点挂在追加到指定的节点上；table 的表头是通过 Object.getOwnPropertyNames(Obj) 方法动态获取，防止硬编码问题；表格中的内容就通过遍历从后台拿到的数据渲染到表格中

function init_table() {let MOCK_DATA = null;
// 判断是否是首次展示页面，如果是首次渲染页面向 localStorage 中存放一个首次展示的状态// 并提示用户首次打开页面不展示数据// 如果不是首次打开页面则向后台发请求获取数据，展示表格数组if (!localStorage.getItem("once")) {alert("页面首次展示不展示数据！ ")localStorage.setItem("once","yes");return;} else {MOCK_DATA = [{id: 1, name: "技术部", sn: 'KFB'},{id: 2, name: "生产部", sn: 'SCB'},{id: 3, name: "测试部", sn: 'CSB'},{id: 4, name: "研发部", sn: 'YFB'},{id: 5, name: "总经办", sn: 'CEO'}];
// TODO 向后台发送请求，获取列表数据并赋值给 MOCK_DATA}
// 创建节点 table、caption、tr、tdlet table = createElement("table");let caption = createElement("caption");var tr = createElement("tr");// 设置表格标题caption.innerText = "部门列表";append(table, caption);
// 拿取模拟数据的第一个对象，获取对象里面的属性名，用于设置表格表头let t_heads = Object.getOwnPropertyNames(MOCK_DATA[0]);for (let i = 0; i < t_heads.length; i++) {var th = createElement("th");th.innerText = t_heads[i];append(tr, th);}
// 创建操作的表头let fun_th = createElement("th");fun_th.innerText = "操作";append(tr, fun_th);append(table, tr);MOCK_DATA.forEach(data => {var tr = createElement("tr");
// 设置当前行 idtr.setAttribute("id", `tr_${data.id}`)for(property in data) {var td = createElement("td");td.innerText = data[property];if ('id' == property) {td.setAttribute("id", `${data.id}`);}append(tr, td);}
/************ 创建每一列的操作节点，并设置相属性  **************/
var fun_td = createElement("td");// 创建编辑节点var aEdit = createElement("a");// 创建删除节点var aDelete = createElement("a");
aEdit.innerText = "编辑 ";aDelete.innerText = " 删除";
aEdit.onclick = () => {
// 通过 id 获取元素，拿到元素的值并强转为数字类型var data_id = Number($(`${data.id}`).innerText);
// TODO 在这里发送编辑的请求alert(`${data_id} 向后台发送编辑请求`);}
aDelete.onclick = () => {// 通过 id 获取元素，拿到元素的值并强转为数字类型var data_id = Number($(`${data.id}`).innerText);
// TODO 在这里向后端发送删除的请求，并刷新页面alert(`${data_id} 向后台发送编删除请求`);// 删除子节点table.removeChild($(`tr_${data.id}`));}append(fun_td, aEdit);append(fun_td, aDelete);append(tr, fun_td);
/************ end  **************/
// 将创建的 tr 行节点添加到 table 表格节点上append(table, tr);})
// 将创建的表格节点挂在到 body / <body></body> 节点上append(document.body, table);
clearCache();}

最后调用初始化方法，

    // 初始化表格init_table();

由于时间关系，后台代码就没有实现，数据全由前端模拟的 MOCK_DATA 数据，代码还需要优化，有点冗余

原生JS实现任意数据的动态表格相关推荐

进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
js异步请求php数据,原生JS发送异步数据请求实例详解
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到 ...
利用freemarker 在模板里面写入动态数据，动态表格，图片插入并生成word文档
利用freemarker 在模板里面写入动态数据,动态表格,图片插入. 以下测试代码图片(image.jpg)和模板(template.xml)是直接放到src目录下面的,可以根据自己需求调整废话不 ...
原生JS 将json数据循环遍历到HTML中
原生JS 将数组的数据循环遍历到HTML中 html如下(图片地址为本地保存的)<div id="article"><!-- <div class=&quo ...
新思路: JS获取任意数据中最大的数字
作者: 万千钧转载请注明出处先说一下正常的思路判断数据类型根据不同类型判断是否是最大数字过程中如果发现新的数组或者对象, 重复步骤一另外一个思路通过将数据转换成JSON, 然后通过正则匹 ...
sd.js帮助您简化繁重的获取数据、存储数据（CRUD）骚操作（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
原生sd.js---------------------------------------------------------------- const API_ROOT_URL = "h ...
Java+freemarker 导出Word文档的实现（包括word for Mac 插入域的方法）-静态数据，动态表格list
1. 准备环境 1.1 word版本:MacOS系统下的Office360 word for Mac下好多操作和win的不一样啊啊啊,差点栽在Mac word的模版设计上. win版本的word模版设 ...
原生JS实现抛物线动画以及动态模糊效果
苏格团队作者:Jason 前言某一天我收到了产品发来的微信消息.小X,我们的业务现在需要一个类似加入购物车的掉落动画,经过组织的慎重考虑,这个需求就交给你了.于是便有了这篇文章.本文并没有描述多少 ...
JS中将 JSON 数据转换为 Excel 表格的详细步骤如下：
工作中后端那为兄弟用java把execl的数据转为json格式发我了,他问我能不能用js把josn在转为execl格式然后我就开始了项目地址下载 xlsx 库在使用 xlsx 库之前, ...

原生JS实现任意数据的动态表格

原生JS实现任意数据的动态表格相关推荐

最新文章

热门文章