原生js实现动态数据表格

动态生成表格是前端开发非常基础且重要的功能，大多数是后端返回数据（json类型），前端通过js循环来动态添加，所以这部分内容是十分重要的，功能其实肥肠简单，话不多数上代码。

先来看看头部组成：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title>

HTML部分：

<table><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table>

再来看css部分：

<style>table {width: 400px;border-collapse: collapse;margin: 100px auto;border: 1px solid #888;text-align: center;}th,td {border: 1px solid #888;padding: 5px 0px;}th {background-color: #1DC797;}tr:hover {cursor: default;background-color: seagreen;}a:hover {cursor: pointer;}
</style>

js部分：

<script>//动态生成表格//data是模拟的后台传来的数据var data = [{"name": "我是老八","class": "css","grade": 100},{"name": "还是我啊","class": "html","grade": 99},{"name": "门矢士","class": "vue","grade": 98},{"name": "上杉绘梨衣","class": "javascript","grade": 96},{"name": "蔡徐坤","class": "php","grade": 95}];//获取table全部var tbody = document.querySelector('tbody');console.log(tbody);//循环输出数据for (var i = 0; i < data.length; i++) {var tr = document.createElement('tr');//创建的tr插入table里tbody.appendChild(tr);//for in 遍历data数组for (var k in data[i]) {var td = document.createElement('td');//给td加上内容td.innerHTML = data[i][k];//创建的td插入tr里tr.appendChild(td);}//创建删除的单元格var td = document.createElement('td');td.innerHTML = '<a style="color:red;">' + '删除' + '</a>';tr.appendChild(td);}//实现点击删除两字删除对应的行var dele = document.querySelectorAll('a');for (var i = 0; i < dele.length; i++) {dele[i].onclick = function() {tbody.removeChild(this.parentNode.parentNode);}}</script>

基础的功能就是这样，肥肠容易理解。

文章仅限参考如有错误请及时指出或补充大家一起努力加油！

原生js实现动态数据表格相关推荐

html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
js异步请求php数据,原生JS发送异步数据请求实例详解
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到 ...
原生js实现动态表格分页(封装版)
之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的. 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页.数据的获取我用的vue,也可以用ajax等其他 ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
用js实现动态添加表格数据
第一种方式: <!DOCTYPE HTML> < html > < head > < meta charset = UTF -8> < titl ...
原生js 给动态添加的元素添加（事件监听器）
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...

原生js实现动态数据表格

原生js实现动态数据表格相关推荐

最新文章

热门文章