js动态生成表格(节点操作)
【js动态生成表格(节点操作)】本文实例为大家分享了js动态生成表格的具体代码,供大家参考,具体内容如下
针对DOM节点操作,该案例效果图如下(代码量不多,就没有结构与行为相分离):
文章图片
原生js实现(注释里面解释了做法):
- 锐客网 table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; } td, th { border: 1px solid #333; } thead tr { height: 40px; background-color: #ccc; }//因为里面的学生数据都是动态的,我们需要js动态生成 这里我们需要模拟数据,自己定义好数据 // 数据我们采取对象形式储存 //1 先准备好学生的数据 //2 所有数据都是放到tbody里面(多少人,多少行) var datas = [{ name: '刘舒新', subject: 'JavaScript', score: '100' }, { name: '宋祥隆', subject: 'JavaScript', score: '80' }, { name: '崔健', subject: 'JavaScript', score: '90' }, { name: '郄海淼', subject: 'JavaScript', score: '70' } ]; //console.log(datas.length); var tbody = document.querySelector('tbody'); for (var i = 0; i < datas.length; i++) { //创建行 trs = document.createElement('tr'); tbody.appendChild(trs); //创建单元格 td的数量取决于每个对象里面的属性个数 for(var k in datas[i]){ //创建单元格 var td=document.createElement('td'); //把对象里面的属性值 给td //console.log(datas[i][k]); td.innerHTML=datas[i][k]; trs.appendChild(td); } //创建操作删除单元格 var td=document.createElement('td'); td.innerHTML='删除' trs.appendChild(td); } //删除操作 var a=document.querySelectorAll('a'); for(var i=0; i
姓名 科目 成绩 操作
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- 记录iOS生成分享图片的一些问题,根据UIView生成固定尺寸的分享图片
- ssh生成公钥秘钥
- 动态组件与v-once指令
- Java内存泄漏分析系列之二(jstack生成的Thread|Java内存泄漏分析系列之二:jstack生成的Thread Dump日志结构解析)
- 15、IDEA学习系列之其他设置(生成javadoc、缓存和索引的清理等)
- 1040表格和W-2表格
- javaweb|基于Servlet+jsp+mysql开发javaWeb学生成绩管理系统
- iview|iview upload 动态改变上传参数
- react-navigation|react-navigation 动态修改 tabBar 样式
- Java代码辅助效率工具Lombok(注解|Java代码辅助效率工具Lombok(注解,自动生成代码)