JavaScript 动态生成表格 及删除表格
创建 表格表头
<body>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
<td>删除</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 定义数组模拟后端返回的数据
var arr = [
{ id: 1, name: '张三', age: 18, sex: '男', addr: '北京' },
{ id: 2, name: '李四', age: 19, sex: '女', addr: '上海' },
{ id: 3, name: 'jack', age: 20, sex: '男', addr: '广州' },
{ id: 4, name: '王五', age: 21, sex: '女', addr: '重庆' },
{ id: 5, name: 'lucy', age: 22, sex: '保密', addr: '天津' },
];
// 调用下边的函数动态生成页面
fun();
// 动态生成页面用函数包起来, 起个名字, 方便调用 ,以及删除后再次调用渲染页面
function fun(){
// 先创建个空的 ,装想要写入的标签及内容
var str =``;
// 循环生成, 数组的索引下标 (0---数组.length-1)
for(var i = 0 ; i <= arr.length-1;i++){
// 动态写入: 标签 + ${ 数组[对应的索引下标] . 对应的属性(有几种下边写几个)}解析出属性值
str +=`
<tr>
<td>${arr[i].id}</td>
<td>${arr[i].name}</td>
<td>${arr[i].age}</td>
<td>${arr[i].sex}</td>
<td>${arr[i].addr}</td>
<td><button>删除</button></td>
</tr>
`;
}
// 获取 tbody 标签
var oTbody = document.querySelector('tbody');
// 给 tbody 标签 写入 动态生成的东西
oTbody.innerHTML = str;
// 获取 生成的 button (注:必须先生成 再获取)
var oBtons = document.querySelectorAll('button')
// forEach 循环所有的 button ( 参数1存:button 参数2存:button的索引下标 )
oBtons.forEach(function(item , key){
// 添加事件 点击 参数1存的:button
item.addEventListener('click',function(){
// 弹出 确认框 询问?
if(window.confirm(`您确定要删除吗?`)){
// 删除 ,数组 对应索引下标的单元(也是button的所以下标) 删除1个
arr.splice(key,1)
// 再次渲染生成页面
fun();
}
})
})
}
</script>
JavaScript 动态生成表格 及删除表格相关推荐
- 利用Javascript动态生成表格的小demo
利用Javascript动态生成表格的小demo 利用Javascript中data数据库存储内容动态生成表格,点击删除可对整行内容进行删除 <!DOCTYPE html> <htm ...
- html动态生成按钮事件,javascript 动态生成按钮并添加事件时为什么不响应？
javascript 动态生成按钮并添加事件时为什么事件不响应?(谢谢大家!) 1)html部分 1 2 3 4 5 6 7 8 9 10 11 12 2)script部分 //_t 为一个现在的Ta ...
- PHP js curl,php curl 获取javascript动态生成的值
我在做一个青果教务系统的模拟登录,使用php的curl,我是新手,边学边做的,它的登录页面有几个hidden的值,发现有一个值是javascript动态生成的,用curl抓取的时候是空的,我要怎么抓取 ...
- html动态生成可输入的表格,动态生成表格.html
动态生成表格 table, thead, tr, th, td{ border: 0; } th { width: auto; } 姓名科目成绩操作 // 使用对象储存的数据,列表 data = [ ...
- 动态生成节点与删除节点
一.动态生成节点 使用$(html字符串)来创建DOM节点,并且返回一个JQuery对象,然后使用append()等方法将该JQuery对象添加到Dom中,比如 var a=$("<a ...
- JavaScript动态生成元素绑定事件时的一些问题、解决与思考
先上结论: 在用js给动态生成的dom元素添加事件时会遇到很多坑. 坑1:使用了 queryselectorall方法获取元素,这个方法获得的是一个静态的Nodelist伪数组,这意味着之后无论你如何 ...
- java生成word 带表格_【java】Freemarker 动态生成word(带图片表格)
1.添加freemarker.jar 到java项目. 2.新建word文档. 3.将文档另存为xml 格式. 4.将xml格式化后打开编辑(最好用notepad,有格式),找到需要替换的内容,将内容 ...
- java生成word 可变表格_【java】Freemarker 动态生成word(带图片表格)
1.添加freemarker.jar 到java项目. 2.新建word文档. 3.将文档另存为xml 格式. 4.将xml格式化后打开编辑(最好用notepad,有格式),找到需要替换的内容,将内容 ...
- javascript动态生成按钮并绑定点击事件
前一个多月公司的前端开发人员离职,公司一直在招前端,基本上每天都有几个来面试的人,就这个面试频率,也才招了一个多月才招到.绝大部分都是死在了一道上机面试提上.题目很基础,但也很考基本功,基本上才3%左 ...
- javascript动态生成网址二维码图片
这个实现二维码生成功能的是引用谷歌google的JS来实现的,可以兼容几乎所有浏览器,包括动态和静态网页,具有加载速度快的特点! 代码如下: 放到你想添加二维码的位置 ; <script typ ...
最新文章
- Nature微生物多样性驱动了细菌以CRISPR系统抵御噬菌体
- 用C++/CLI搭建C++和C#之间的桥梁（三）—— 基本类型
- JAVA中反射的实现过程和作用分别是什么？
- 在 ns-3.25中添加 plc（电力线载波） 模块
- 2021年中国动物血浆制品及其衍生物市场趋势报告、技术动态创新及2027年市场预测
- 深度学习之神经网络核心原理与算法-caffekeras框架图片分类
- 做一个小淘气轮廓--文章和论文专辑
- html弧形列表效果,好看漂亮的html5网页特效学习笔记(5)_弧形菜单
- ASP.NET生成eurl.axd Http异常错误处理方法【转】
- Instrument详解
- AI 编辑视频！这特效太逆天了！代码开源 SIGGRAPH Asia 2021
- 守护线程和用户线程的真正区别（实例讲解）
- 白苹果如何制作自己的OS X 10.9“巨浪”可引导系统安装盘？
- ES Module 和 Commonjs | require和import的区别
- mysql中高阶玩法系列（八）
- 12月30日学习总结
- 神经网络之梯度下降法及其实现
- 【软件工程】第10组 团队展示
- 手动实现一个满足promises-aplus-tests的Promise
- EasyTouch 学习之——ETCJoystick 虚拟摇杆