js学习表格添加与删除数据实现
时间:2021-07-28
本文章向大家介绍js学习表格添加与删除数据实现,主要包括js学习表格添加与删除数据实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
写出表格,然后实现对表格的增删
样式如下,请看图片
其中添加和删除功能使用js实现
具体实现如下
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 #main_hear{text-align: center;margin-top: 50px;margin-bottom: 20px;}
10 table{
11 margin: 0 auto;
12 border: 1px solid;
13 width: 500px;
14 }
15 td,th{
16 text-align: center;
17 border: 1px solid;
18 }
19 table tr td a{
20 width: 100%;
21 height: 100%;
22 }
23 </style>
24 <script>
25 function delTr(obj){
26 var tabb = obj.parentNode.parentNode.parentNode
27 var trr = obj.parentNode.parentNode;
28 tabb.removeChild(trr);
29 }
30 </script>
31 </head>
32 <body>
33 <div id="main_hear">
34 <input id="id" type="text" placeholder="编号">
35 <input id="name" type="text" placeholder="姓名">
36 <input id="gender" type="text" placeholder="性别">
37 <input id="btn_add" type="button" value="添加">
38 </div>
39 <table id="tablee">
40 <caption>学生信息表</caption>
41 <tr>
42 <th>编号</th>
43 <th>姓名</th>
44 <th>性别</th>
45 <th>操作</th>
46 </tr>
47 <tr>
48 <td>1</td>
49 <td>王五</td>
50 <td>男</td>
51 <td><a href="#" onclick="delTr(this)">删除</a></td>
52 </tr>
53 <tr>
54 <td>1</td>
55 <td>王五</td>
56 <td>男</td>
57 <td><a href="#" onclick="delTr(this)">删除</a></td>
58 </tr>
59 <tr>
60 <td>1</td>
61 <td>王五</td>
62 <td>男</td>
63 <td><a href="#" onclick="delTr(this)">删除</a></td>
64 </tr>
65
66 </table>
67 <script>
68 document.getElementById("btn_add").onclick = function (){
69 var id = document.getElementById("id").value;
70 var name = document.getElementById("name").value;
71 var gander = document.getElementById("gender").value;
72 //alert(id+name+gander);
73 /*var tt = document.createElement("tr"); //创建节点
74 var tt_1 = document.createElement("td");
75 var tt_2 = document.createElement("td");
76 var tt_3 = document.createElement("td");
77 var tt_4 = document.createElement("td");
78 var tt_4a = document.createElement("a");
79
80 tt_1.innerHTML=id;//设置内容
81 tt.appendChild(tt_1);//添加节点
82 tt_2.innerHTML=name;
83 tt.appendChild(tt_2);
84 tt_3.innerHTML=gander;
85 tt.appendChild(tt_3);
86 tt_4a.setAttribute("href","#");//设置节点属性
87 tt_4a.setAttribute("onclick","delTr(this)");//设置节点属性
88 tt_4a.innerHTML = "删除";
89 tt_4.appendChild(tt_4a);
90 tt.appendChild(tt_4);
91 document.getElementById("tablee").appendChild(tt); //将节点添加到表格*/
92 document.getElementById("tablee").innerHTML+="<tr>\n"+
93 "<td>"+id+"</td>\n"+
94 "<td>"+name+"</td>\n"+
95 "<td>"+gander+"</td>\n"+
96 "<td><a href=\"#\" onclick=\"delTr(this)\">删除</a></td>\n"+
97 "</tr>"
98 }
99
100 </script>
101 </body>
102 </html>
再然后就是其中采用了两种方式实现增加表格,一种是
tt.appendChild(tt_1);//添加节点
这样添加节点的方式,一种是使用了innerHTML实现,我注释掉的一部分是前者实现,后边未注释掉的部分为后者实现
原文地址:https://www.cnblogs.com/yyyueyou/p/15070780.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 花木兰到底好看不,我用Python爬取了几万条评论!
- java方法重载
- java中super()和this()浅析
- 常见的 Spring 注解概览
- java中 this和super的区别
- Java常用API(ArrayList类)
- 关于多线程中抛异常的这个面试题我再说最后一次!
- 卧槽!居然有比Flask更好用更简单的框架
- Java8基础学习(一)- Founction接口
- java数组详解
- 初识Java对象
- Java常用API(Scanner类)
- Java中多线程的使用(超级超级详细)线程安全+线程锁原理解析+保证线程安全的三种方式 (同步代码块+同步方法+lock锁) 5
- Java匿名对象介绍
- Java常用API(Random类)