html js之实现简单的增删功能

最新推荐文章于 2023-12-27 13:56:23 发布
最新推荐文章于 2023-12-27 13:56:23 发布
阅读量1.9k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41555580/article/details/90520320
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    #table1,#table2{
        border-style: solid;
    }
    #table1 th{
        border-style: solid;
        width: 50px;
    }
    #table1 td{
        border-style: solid;
    }
</style>
<body>
<center>
    <table id="table1">
        <tr>
            <th>Name</th>
            <th>sex</th>
            <th>Salary</th>
            <th></th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>3000</td>
            <td><button class="btn">删除</button></td>
        </tr>
    </table>
    <table id="table2">
        <tr>
            <th>添加新员工</th>
        </tr>
        <tr>
            <td>name:</td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td>sex:</td>
            <td><input type="text" id="sex"></td>
        </tr>
        <tr>
            <td>Salary:</td>
            <td><input type="text" id="salary"></td>
        </tr>
        <tr>
            <td><button id="btn1">submit</button></td>
        </tr>
    </table>
</center>
</body>
</html>
<script type="text/javascript">
    window.onload=function () {
        var btn=document.getElementsByClassName("btn");
        for(var i=0;i<btn.length;i++){
            btn[i].onclick=function () {
              var tr=this.parentNode.parentNode;
              var name=tr.getElementsByTagName("td")[0].innerHTML;
                var flag= confirm("确定删除"+name+"吗？");
               if(flag==true){
              tr.parentNode.removeChild(tr);}
            }
        }
        var btn1=document.getElementById("btn1");
        btn1.onclick=function () {
            var table1=document.getElementById("table1");
            var name=document.getElementById("name").value;
            var sex=document.getElementById("sex").value;
            var salary=document.getElementById("salary").value;
            var tr=document.createElement("tr");
            var nametd=document.createElement("td");
            var sextd=document.createElement("td");
            var salarytd=document.createElement("td");
            var blanktd=document.createElement("td");
            var buttonx=document.createElement("button");
            buttonx.innerHTML="删除";
            buttonx.onclick=function(){
                var tr=this.parentNode.parentNode;
                var name=tr.getElementsByTagName("td")[0].innerHTML;
                var flag= confirm("确定删除"+name+"吗？");
                if(flag==true){
                    tr.parentNode.removeChild(tr);}
            }
            nametd.innerHTML=name;
            sextd.innerHTML=sex;
            salarytd.innerHTML=salary;
            blanktd.appendChild(buttonx);
           tr.appendChild(nametd);
           tr.appendChild(sextd);
           tr.appendChild(salarytd);
           tr.appendChild(blanktd);
           table1.appendChild(tr);
        }
    }
</script>

在这里插入图片描述

microsoft chatgpt
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端小项目，使用原生js代码实现购物车的基本功能-增删改查
11-15
# 简介 本项目基于blibli上的[JavaScript实用案例 js实现购物车功能](https://www.bilibili.com/video/BV1jJ411q7NB/?vd_source=82aacf68766305e449b09379dcddb8bf)的前端页面框架完成，并且对html页面进行简单修改，使用js原生代码实现了购物车页面的增删改查，具体可见cart.js页面部分，因为视频上有相应的教程，读者也可按需在shop.js页面中写入视频教程代码。
html最简单的增删改查实现方式
05-11
用js实现的一个增删改查，给学校javascript的同学用
html实现数据的增删查改
jyq_hello的博客
08-01 1万+
关于数据的修改，保存，添加，删除     一,要求：   做出一个表格，在表格中完成数据的添加，删除，修改，排序，以及重复检查。 二,实现过程   在做这个实验是在老师把表格给弄好后，以及完成表格的删除行和添加数据的基础上实现的。其中我自己完善的有关于数据的保存，修改，和如果当有序号重复时，其会报错，也就是这个程序是以序号不重复为标准进行其他的操作。运用了onclick的事件响应，通过
htmljs计算机删除功能,js实现创建删除html元素小结
weixin_39891317的博客
07-25 223
如果我要创建一个div元素。1.使用DOM对象创建：使用document.createElement('div')方法创建元素。2.使用JQuery创建：使用$('通过JQuery创建的新元素')的方法直接创建元素。如果需要将id是‘div2js'的div元素删除。1.使用DOM对象首先需要找到被删元素的父元素，通过父元素将其需要删除的子元素删除。var el = document.getElem...
使用JS删除HTML元素的两种方法
sejinan的博客
10-18 3709
使用removeChild()方法删除HTML元素。：使用remove()方法从文档中删除HTML元素。
html之表格数据增加删除修改
热门推荐
Quincy.Coder的博客
10-11 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="./bootstrap-
用js向html里面添加(插入)、删除与修改元素
lcszz0302的博客
01-18 1万+
添加(插入) 这里我们创建一个无序列表，当然了什么都可以，我们以无需列表来举例然后有三个按钮 我们的需求是： 点击‘有请紫衫龙王’之后，在青翼蝠王的前面出现紫衫龙王 点击‘有请新教主’之后，在金毛狮王的前面出现张无忌 点击‘有请老教主’之后，在白眉鹰王的后面出现阳顶天 创建无需列表代码如下 <ul id="hero"> <li id="li1">金毛狮王</li> <li id="li2">青翼蝠王</li> &lt.
原生js实现表格数据的增加和删除
keep hungry , keep active
11-26 6719
    再一次记录已经是找到工作之后了，实习工作，工资很低，但是能学到东西就好了。     首先分析一下增加和删除的一些思路，增加：即获取用户在表单输入的数据，然后通过表格显示出来；删除，即点击“删除”，将删除表格中的一些数据。做好之后的大致是这样： 点击‘新增’按钮，把表单中的数据提交到表格内，点击表格中的‘删除’按钮，即删除当前行。 还是废话不多说，直接上代码 &lt;tab...
un8.21:用html实现增删改查功能（代码篇）。
努力是为了让自己不平庸。。。
08-22 5040
如何在前端页面实现增删改查功能？
HTML详解——初识html（二）
qq_46362763的博客
03-13 1610
随着网页开发的不断发展，学习Web前端这门技术也越来越重要，很多人都开启了学习HTML，本文就介绍了HTML的部分基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
js+html写的实现表格的动态增删改查和表单验证
08-04
js+html写的实现表格的动态增删改查和表单验证
JS操作表格代码CRUD操作(很完整)
05-08
JS操作表格的代码，动态生成表格和操作表格，里面写的很详细，很完整。
javascript实现表格添加删除等操作
03-26
静态实现javascript，实现表格的增加和删除等功能，值得初学者学习
JS实现简易留言板增删功能
11-21
本文实例为大家分享了JS实现留言板增删功能的具体代码，供大家参考，具体内容如下 ## **JS实现简易留言板的增删功能** 一个很简单的留言板，实现**增删**功能，因为没有数据库，所以只是一个静态的留言板功能。 **...
基于nodejs+mongodb实现简单的用户增删改查功能
04-10
基于nodejs+mongodb实现简单的用户增删改查功能,包含完整的前端页面
学生信息管理系统（实现增删改查操作）Java+Servlet+HTML+CSS+数据库
12-09
数据库部分：创建表、增删改查语句的书写等。 前端部分：HTML、CSS、jQuery、JavaScript等。 编码顺序 添加项目需要使用的各种jar包 HTML 页面表单的编写 Apache方法的DBUtils编写 实体类的数据初始化（添加私有...
基于SpringBoot+Vue实现增删改查和分页查询DEMO（源码+数据库)
04-17
springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO（源码+数据库) 技术栈 数据库：MySQL 后端框架：SpringBoot+Spring Data JPA 前端框架：Vue-ElementUI
html table可编辑表格数据实现删除
xingdiango的博客
12-21 1107
这样，当用户点击某一行的“Delete”按钮时，相应的行将被删除。在实际项目中，可能需要进一步确认用户是否要删除该行，以及处理删除后的数据更新。在上述示例中，每行的最后一列添加了一个按钮，并为按钮绑定了一个 onclick 事件，调用。函数接受按钮作为参数，在函数内部首先获取按钮的父节点，即所在的。这里教大家使用纯html和js脚本结合实现删除表格数据。元素，最后获取行元素的父节点，即所在的表格。方法，将行的索引作为参数，从表格中删除该行。JavaScript 部分的。的父节点，即所在的行。
Html页面 对列表进行选择、取消选择、删除、清空等操作
最新发布
weixin_44443380的博客
12-27 414
【代码】Html页面 对列表进行选择、取消选择、删除、清空等操作。
用HTML实现简单增删改查
07-09
以下是一个简单的示例，演示如何使用HTML实现增删改查的功能： ```html <!DOCTYPE html> <html> <head> <title>简单增删改查示例</title> </head> <body> <h2>待办事项列表</h2> <!-- 显示待办事项 --> <ul id="todo-list"> <!-- 这里可以使用JavaScript来动态添加待办事项 --> </ul> <h2>新增待办事项</h2> <!-- 输入新的待办事项 --> <input type="text" id="new-todo" placeholder="输入待办事项"> <button onclick="addTodo()">添加</button> <h2>修改待办事项</h2> <!-- 输入要修改的待办事项的索引和新值 --> <input type="text" id="edit-index" placeholder="输入要修改的索引"> <input type="text" id="edit-value" placeholder="输入新的值"> <button onclick="editTodo()">修改</button> <h2>删除待办事项</h2> <!-- 输入要删除的待办事项的索引 --> <input type="text" id="delete-index" placeholder="输入要删除的索引"> <button onclick="deleteTodo()">删除</button> <script> // 待办事项数组 var todos = []; // 添加待办事项 function addTodo() { var input = document.getElementById("new-todo"); var todo = input.value; todos.push(todo); input.value = ""; displayTodos(); } // 修改待办事项 function editTodo() { var indexInput = document.getElementById("edit-index"); var valueInput = document.getElementById("edit-value"); var index = parseInt(indexInput.value); var value = valueInput.value; todos[index] = value; indexInput.value = ""; valueInput.value = ""; displayTodos(); } // 删除待办事项 function deleteTodo() { var input = document.getElementById("delete-index"); var index = parseInt(input.value); todos.splice(index, 1); input.value = ""; displayTodos(); } // 显示待办事项 function displayTodos() { var list = document.getElementById("todo-list"); list.innerHTML = ""; for (var i = 0; i < todos.length; i++) { var li = document.createElement("li"); li.innerHTML = todos[i]; list.appendChild(li); } } </script> </body> </html> ``` 这是一个简单的增删改查示例，其中使用了JavaScript来处理用户的操作。用户可以通过输入框添加新的待办事项，修改已有的待办事项或删除指定的待办事项。待办事项会实时显示在页面上。请注意，这只是一个基本示例，实际应用中可能需要更复杂的逻辑和交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值