学习内容：

需求

用 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. 2. Java入门

    2.Java入门 2.1.安装开发环境 卸载JDK 删除Java的安装目录 删除JAVA_HOME 删除path下关于Java的目录 java -version 安装JDK 百度搜索JDK8,找到下载 ...

  2. laravel7 搜索之when()函数实现搜索

    当做搜索功能时,我们经常会遇到这样的情况,需要判断搜索词是否为空,为空则不执行模糊查询条件,反之需要执行模糊查询条件.这样很繁琐,其实laravel给我们提供了一个友好的函数,辅助我们很快完成这样任务 ...

  3. laravel7 H-ui模板ajax软删除

    1:HTML 书写 {{-- 不能自己删除自己的按钮出现 $item循环的值,$auth检测函数 --}} @if(auth()->id()!=$item->id) <a title ...

  4. JDBC学习一---JDBC入门

    原文链接 今天开始会写一系列 Java 后端学习的笔记,一方面是为了以后翻阅查看,更主要的原因是通过写作输出的方式让自己的印象更深,避免遗忘. 首先是简单记录下自己学习使用 JDBC 的历程,由于目前 ...

  5. 手写 Vue2 系列 之 编译器

    前言 接下来就要正式进入手写 Vue2 系列了.这里不会从零开始,会基于 lyn-vue 直接进行升级,所以如果你没有阅读过 手写 Vue 系列 之 Vue1.x,请先从这篇文章开始,按照顺序进行学习 ...

  6. 打靶笔记-04-vulnhub-Jangow

    打靶笔记-04-vulnhub-Jangow 前面两篇名称写成了vulhub,已经更改为vulnhub;vulhub的之后再找个时间集中打一遍. 一.靶机信息 Name: Jangow: 1.0.1 ...

  7. ZYNQ 启动问题 ：FSBL

    0.ZYNQ外部启动条件 1. 电源要求: 在阶段0 BootROM时,安全模式下PS与PL都是必须上电的:非安全模式PS需要上电,如图: 在阶段1 FSBL时,PS与PL都是必须上电的,因为PL将在 ...

  8. 74cms v4.2.1-v4.2.129-后台getshell漏洞复现

    0x00 影响范围 v4.2.1-v4.2.129 0x01 环境搭建 1. 先去官网下载 骑士人才系统基础版(安装包) 2.将下载好的包进行安装 0x02 复现过程 当前版本v4.2.111 点加工 ...

  9. 内网渗透----windows信息收集整理

    一.基础信息收集 1.信息收集类型 操作系统版本.内核.架构 是否在虚拟化环境中,已安装的程序.补丁 网络配置及连接 防火墙设置 用户信息.历史纪录(浏览器.登陆密码) 共享信息.敏感文件.缓存信息. ...

  10. AOP详解之三-创建AOP代理后记，创建AOP代理

    AOP详解之三-创建AOP代理后记,创建AOP代理. 上篇文章已经获取到了AOP的信息,接下来就是拿着这些AOP的信息去创建代理了. 首先我们看下创建AOP代理的入口处. //这个方法将返回代理类 p ...