用 JS(JavaScript )实现增删改查
学习内容:
需求
用 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 )实现增删改查的更多相关文章
- javaScript实现增删改查
自己写的一个html+javaScript实现增删改查小实例.下面是js代码1. [代码][JavaScript]代码 //1.创建受捐单位数组var arrOrgData = [ { & ...
- js操作indexedDB增删改查示例
js操作indexedDB增删改查示例 if ('indexedDB' in window) { // 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本 var r ...
- JS源生代码“增删改查”之增
51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示: 下面是有关HTML的代码:这个主要是弹窗部 ...
- Node.js之mysql增删改查
1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...
- DOM操作 JS事件 节点增删改查
--------------------------习惯是社会的巨大的飞轮和最可贵的维护者.——威·詹姆斯 day 49 [value属性操作] <!DOCTYPE html><ht ...
- node.js封装数据库增删改查
数据库增删改查的封装 小编不容易 const sql = { insert: function (Collection, insertData) { return new Promise((resol ...
- js数组的增删改查
array 数组的增删改: push 从数组后面推入一个元素或多个元素 var arr = [1,2,3]; // 返回:修改后数组的长度 arr.push(4,5,6); pop 删除数组最后一 ...
- JS DOM节点增删改查 属性设置
一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加 删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...
- JS高级. 04 增删改查面向对象版歌曲管理、递归、
增 数组.push() 删 数组.splice(开始删除索引,删除几个) 在当前对象中调用当前对象的方法中和属性,必须用this调用 nodeType判断节点类型 节点.nodeType == 1: ...
- Elasticsearch Javascript API增删改查
查询 根据索引.类型.id进行查询: client.get({ index:'myindex', type:'mytype', id:1 },function(error, response){// ...
随机推荐
- ELKB-ElasticSearch-Logstash-Kibana-beats 个人理解
先说一下ELK,E是ElasticSearch,L是Logstash,K是Kibana,还有一个Beats.按照从采集到展示的顺序介绍下各个组件的作用. 1.Beats Beats 是一个免费且开放的 ...
- yum 安装时报错 Existing lock /var/run/yum.pid: another copy is running as pid 3192.
yum 安装时报错 由于yum的时候意外退出造成的,虽然也给出提示当前占用进行的id,但是执行kill -9 强制杀死进程后,情况没能改变. 解决方法:rm -f /var/run/yum.pid然 ...
- Hadoop之Mapreduce 程序
package com.gylhaut.hadoop.senior.mapreduce; import java.io.IOException; import java.util.StringToke ...
- 活用Windows Server 2008系统的几种安全功能
与传统操作系统相比,Win2008系统的安全防范功能更加强大,安全防护能力自然也是高人一等,我们只要在平时善于使用该系统新增的各项安全防范功能,完全可以实现更高级别的安全保护目的.现在,本文就为大家贡 ...
- phpcms手工注入教程
目标服务器(靶机):192.168.1.27 目标网站:http://192.168.1.27:8083 步骤: 一.靶机操作 1.进入靶机,查看IP地址: 开始-运行,输入cmd回车,出现命令行窗口 ...
- 微服务部署 docker-compose
1.docker-maven-plugin 介绍 在我们持续集成过程中,项目工程一般使用 Maven 编译打包,然后生成镜像,通过镜像上线,能够大大提供上线效率,同时能够快速动态扩容,快速回滚,着实很 ...
- python 迭代器和生成器基础知识
1.迭代器遵循迭代器协议:必须拥有__iter__方法和__next__方法--字符串.列表.元组.字典.集合都是可迭代的--可以被for循环的都是可迭代的 2. 迭代器有的好处是可以节省内存 3.生 ...
- 什么是Spring IOC 容器?
Spring IOC 负责创建对象,管理对象(通过依赖注入(DI),装配对象,配置对象,并且管理这些对象的整个生命周期.
- uWSGI+django+nginx的工作原理流程与部署
二.必要的前提 2.1 准备知识 django 一个基于python的开源web框架,请确保自己熟悉它的框架目录结构. uWSGI 一个基于自有的uwsgi协议.wsgi协议和http服务协议的web ...
- SpringBoot打包成可执行的Jar文件
需要时SpringBoot项目 通过创建可以在生产环境中运行的完全独立的可执行jar文件来结束示例.可执行jar(有时称为"胖jar")是包含您的已编译类以及代码需要运行的所有ja ...