学习内容：

需求

用 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 ）实现增删改查相关推荐

Elasticsearch Javascript API增删改查
查询根据索引.类型.id进行查询: client.get({ index:'myindex', type:'mytype', id:1 },function(error, response){// ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
javascript实现增删改查
增删改查增删改查对于学前端的来说,可以说是必修课,在很多的网站中都会遇见这种功能,那么今天,我们就来看看如何使用js来实现正删改查. 首先,我们先模拟一个后台数据,如下: var data = [{ ...
js操作indexedDB增删改查示例
js操作indexedDB增删改查示例 if ('indexedDB' in window) {// 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本var req ...
JavaScript 对象增删改查 + 遍历对象+内置函数 + 随机对象
red red 1.什么是对象? 对象是JavaScript 里的一种数据类型:可以理解为是一种无序的数据集合:用来描述某个事物,例如描述一个人信息 2.对象怎么声明? let 对象名 = {} 例如 ...
node.js学习day03 通过node.js连接数据库实现增删改查
通过node.js连接mysql数据库实现增删改查 1. npm i mysql 导入mysql模块 2.熟悉数据库增删改查 3.建立连接通过mysql.createPool 4.案例 const ...
JS DOM节点增删改查属性设置
一.节点操作增 createElement(name)创建元素 appendChild();将元素添加删获得要删除的元素获得它的父元素使用removeChild()方法删除改第一种方式: ...
纯javascript实现增删改查
效果图: html: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
Python selenium对js元素进行增删改查操作
1.首先,我们列出Selenium 对JS元素操作的4中方法: 增加属性 driver.execute_script("arguments[0].%s=arguments[1]" ...

用 JS（JavaScript ）实现增删改查

JS小例题

学习内容：

需求

总结：

用 JS（JavaScript ）实现增删改查相关推荐

最新文章

热门文章