DOM JS实现动态表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态表格</title><style>table {border: 1px solid;margin: auto;width: 500px;}td, th {text-align: center;border: 1px solid;}div {text-align: center;margin: 50px;}</style></head>
<body><div><input type="text" id="id" placeholder="请输入编号"><input type="text" id="name" placeholder="请输入姓名"><input type="text" id="gender" placeholder="请输入性别"><input type="button" value="添 加" id="btn_add"></div><table id="student"><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);" onclick="delInfo(this)">删除</a></td></tr><tr><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);" onclick="delInfo(this)">删除</a></td></tr><tr><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);" onclick="delInfo(this)">删除</a></td></tr><script>function addInfo() {//1.获取表单里的数据var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//创建td1，并向td1中写放表单中的数据var td1 = document.createElement("td");//创建文件节点，并向其中添加内容var idText = document.createTextNode(id);td1.appendChild(idText);//创建td2，并向td2中写放表单中的数据var td2 = document.createElement("td");//创建文件节点，并向其中添加内容var nameText = document.createTextNode(name);td2.appendChild(nameText);//创建td3，并向td3中写放表单中的数据var td3 = document.createElement("td");//创建文件节点，并向其中添加内容var genderText = document.createTextNode(gender);td3.appendChild(genderText);//创建td4，并向td4中写删除按钮var td4 = document.createElement("td");//创建<a>var ele_a = document.createElement("a");//设置单击，而不跳转ele_a.setAttribute("href","javascript:void(0);");//设置单击事件ele_a.setAttribute("onclick","delInfo(this)");//设置文本节点var scText = document.createTextNode("删除");ele_a.appendChild(scText);td4.appendChild(ele_a);//创建Tr ,向Tr 中添加tdvar tr = document.createElement("tr");tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);//获取table 向table中添加 trvar table = document.getElementById("student");table.appendChild(tr);}//获取提交按钮，设置单击事件var addButten = document.getElementById("btn_add");addButten.onclick = addInfo;//定义一个删除函数function delInfo(obj) {//a->td->tr->tablevar table = obj.parentNode.parentNode.parentNode;//a->td->trvar tr = obj.parentNode.parentNode;//父类调用方法，删除子节点table.removeChild(tr);}</script></table></body>
</html>

DOM JS实现动态表格相关推荐

【黑马JS比较】用JavaScripts的DOM对象实现动态表格
案例: 在表格上可以实现添加和删除操作思路: 代码: html: <!DOCTYPE html> <html><head><title>动态表格< ...
JS生成动态表格并为每个单元格添加单击事件的方法
<html><head><title>Demo</title><script>function getColumnDetail(column ...
JS - 生成动态表格
<script>var datas = [{name: '卡卡西',subject: 'JavaScript',grade: 100,}, {name: '鸣人',subject: 'Ja ...
原生js实现动态表格分页(封装版)
之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的. 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页.数据的获取我用的vue,也可以用ajax等其他 ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
iden中html中表格自动生成,JS实现动态生成html table表格的方法分析
本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有 ...
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
原生JS实现任意数据的动态表格
昨天晚上有个女生叫我帮他看一下前端怎么通过 JQuery 向后台发送数据,今天上午刚测试完Java,下午就花了一点时间来实现动态表格案例,其实也不难,就是使用原生的JS来实现:其中有一个很奇葩的需求. ...
Node.js 动态表格大文件下载实践
前言最近优化了几个新人写出的动态表格文件下载接口的性能瓶颈,感觉非常有必要总结一篇文章作为文档来抛砖引玉,以促进大家学习一起写出更专业的代码. HTTP 文件下载讲具体问题之前需要先了解一些 HT ...

DOM JS实现动态表格

DOM JS实现动态表格相关推荐

最新文章

热门文章