学习内容:

需求

用 JavaScript 实现简单增删改查
实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户新增</title>
<script>
window.onload = () => {
// 给获取的 id 添加点击事件
// 添加用户
document.getElementById("btn_submit").onclick = function () {
let username = document.getElementById("username").value;
console.log(username);
let email = document.getElementById("email").value;
let tel = document.getElementById("tel").value;
let tbody = document.getElementById("userTbody");
if (username !== null && username !== '' && username !== undefined) {
// 设置要插入的表格行信息
let tr = "<tr id=\"" + new Date().getTime() + "\">\n" +
"\t\t\t\t<td>" + username + "</td>\n" +
"\t\t\t\t<td>" + email + "</td>\n" +
"\t\t\t\t<td>" + tel + "</td>\n" +
"\t\t\t\t<td><a href=\"javascript:delRow('" + new Date().getTime() + "')\">删除</a></td>\n" +
"\t\t\t</tr>"; // 把新插入的行信息插入表格中
console.log(tbody.innerText);
console.log(tbody.innerHTML);
tbody.innerHTML += tr;
} else {
alert("姓名不能为空!");
}
// 添加信息之后把表单设置为空
document.getElementById("username").value = "";
document.getElementById("email").value = "";
document.getElementById("tel").value = "";
}; document.getElementById("btn_removeAll").onclick = () => {
var tbody = document.getElementById("userTbody");
tbody.innerHTML = "";
};
};
// 删除用户
function delRow(id) {
let tr = document.getElementById(id);
tr.parentNode.removeChild(tr);
}
</script>
</head>
<body>
<form name="userForm">
<center>
用户录入<br/>
用户名:<input id="username" name="username" type="text" size=15/>
E-mail:<input id="email" name="email" type="text" size=15/>
电话:<input id="tel" name="tel" type="text" size=15/>
<input type="button" value="添加" id="btn_submit"/>
<input type="button" value="删除所有" id="btn_removeAll"/>
</center>
</form>
<hr/>
<table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
<thead>
<tr>
<th>用户名</th>
<th>E-mail</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="userTbody">
<tr id="tr1">
<td>小肥羊</td>
<td>wujizhang@163.com</td>
<td>18212345678</td>
<td><a href="javascript:delRow('tr1')">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>

总结:

以上就是用 JS(JavaScript )实现增删改查的代码了,代码仅供参考,欢迎讨论交流。

用 JS(JavaScript )实现增删改查的更多相关文章

  1. javaScript实现增删改查

    自己写的一个html+javaScript实现增删改查小实例.下面是js代码​1. [代码][JavaScript]代码   //1.创建受捐单位数组var arrOrgData = [    { & ...

  2. js操作indexedDB增删改查示例

    js操作indexedDB增删改查示例 if ('indexedDB' in window) { // 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本 var r ...

  3. JS源生代码“增删改查”之增

    51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示: 下面是有关HTML的代码:这个主要是弹窗部 ...

  4. Node.js之mysql增删改查

    1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...

  5. DOM操作 JS事件 节点增删改查

    --------------------------习惯是社会的巨大的飞轮和最可贵的维护者.——威·詹姆斯 day 49 [value属性操作] <!DOCTYPE html><ht ...

  6. node.js封装数据库增删改查

    数据库增删改查的封装 小编不容易 const sql = { insert: function (Collection, insertData) { return new Promise((resol ...

  7. js数组的增删改查

    array 数组的增删改: push 从数组后面推入一个元素或多个元素 var arr = [1,2,3]; ​ // 返回:修改后数组的长度 arr.push(4,5,6); pop 删除数组最后一 ...

  8. JS DOM节点增删改查 属性设置

    一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加   删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...

  9. JS高级. 04 增删改查面向对象版歌曲管理、递归、

    增 数组.push() 删 数组.splice(开始删除索引,删除几个) 在当前对象中调用当前对象的方法中和属性,必须用this调用 nodeType判断节点类型 节点.nodeType ==  1: ...

  10. Elasticsearch Javascript API增删改查

    查询 根据索引.类型.id进行查询: client.get({ index:'myindex', type:'mytype', id:1 },function(error, response){// ...

随机推荐

  1. 【故障公告】龙卷风来袭:突增的并发请求,撑不住的CPU

    (上图是数据库连接数监控图) 非常抱歉,今天下午 16:50-17:40 期间,一场龙卷风突袭园子,突增的并发请求狂卷博客站点的 pod,由于风力巨大(70%左右的增量),pod 的 cpu 不堪重负 ...

  2. php 原生分页

    <?php // 连接数据库 $link = mysqli_connect("127.0.0.1", "root", "root", ...

  3. 比较 Java 静态工厂方法与构造函数

    1 什么是静态工厂方法 Java 静态工厂方法是在方法前加上 public static,让这个方法变为公开.静态的方法.该方法返回该类的一个实例,就好像一个工厂生产出一个产品.所以称之为静态工厂方法 ...

  4. linux 常用命令:

    查看启动进程命令 ps -ef |  grep donet 1.vi 进入编辑界面 2.ls,ll 查看命令 3.cd 进入命令 4.i 进入插入界面 5. esc 退出编辑界面 6.输入:冒号,进入 ...

  5. 【基础】工作中常用的linux命令,经常会被面试官问到

    前言 面试经常会问到一些Linux操作命令,下面就工作中常用的和面试问的频率较高的命令做详细描述. 常用命令 修改密码:passwd 用户名 切换用户名:su 用户名 查看当前路径:pwd 调整路径: ...

  6. python3 爬虫 Scrapy库学习1

    1生成项目:生成项目文件夹 scrapy startproject 项目名 2生成爬虫文件 scrapy genspider 爬虫名 指定域名 3进入items文件可以输入自己想要爬取的内容比如 te ...

  7. leetcode刷题1--动态规划法回文串2

    题目是: Given a string s,partition s such that every substring of the partition is a palindrome Return ...

  8. 重写hashcode和equals方法

    重写hashcode和equals方法 简乐君 2019-05-07 21:55:43 35481 收藏 191分类专栏: Java 文章标签: equals() hashcode()版权 一.前言我 ...

  9. Mysql之锁(一)

    读锁与写锁 读锁:共享锁.Shared Locks.S锁. 写锁:排他锁.Exclusive Locks.X锁. 读锁:只能读不允许写 写锁:不能读也不能写,只允许自己写 但是允许其他事务进行普通的s ...

  10. JDK中哪些类是不能继承的?

    不能继承的是类是那些用final关键字修饰的类. 实际上即使我们自己开发的类,也可以通过使用final修饰来阻止被继承.通过使用final修饰一个类,可以阻止该类被继承,这样该类就被完全地封闭起来了, ...