js 实现简单的增删改查

最新推荐文章于 2024-06-15 11:00:00 发布
最新推荐文章于 2024-06-15 11:00:00 发布
阅读量7.5k 收藏 29
点赞数 5
分类专栏： 小练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43018850/article/details/82876785
版权

自己做的简单的增删改查的表


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.box {
				width: 800px;
				margin: 200px auto;
			}
			
			ul {
				float: left;
				list-style: none;
			}
			
			li {
				padding: 5px 8px;
				float: left;
				width: 115px;
			}
			
			span {
				margin-right: 5px;
				text-decoration: underline;
				color: blue;
				cursor: pointer;
			}
			
			ul:nth-child(1){
				color: white;
				background-color: deepskyblue;
			}
			button{
				width: 60px;
			}
			input{
				width: 100px;
			}
			.box1,.box2{
				margin-top: 5px;
			}
			h1{
				width: 130px;
				margin: 0 auto;
				margin-bottom: 30px;
			}
			#change1{
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<h1>捐赠管理</h1>
			<div class="box1">受捐单位
				<select id="pri">
					<option selected>--请选择--</option>
					<option>红十字会</option>
					<option>壹基金</option>
					<option>中国慈善总会</option>
					<option>中国扶贫基金会</option>
				</select>
				<button id="search">查询</button>
				<button>上一页</button>
				<button>下一页</button>
			</div>
			<div class="box2">
				捐赠人：
				<input type="text" id="more1"/>
				受捐单位:
				<select id="more2">
					<option selected>--请选择--</option>
					<option>红十字会</option>
					<option>壹基金</option>
					<option>中国慈善总会</option>
					<option>中国扶贫基金会</option>
				</select>
				金额：
				<input type="text" id="more3"/>
				受捐日期：
				<input type="text" id="more4"/>
				<button id="more">新增</button>
			</div>
			<div id="box3">
				<ul>
					<li>序号</li>
					<li>捐赠人</li>
					<li>受捐单位</li>
					<li>金额</li>
					<li>受捐日期</li>
					<li>操作</li>
				</ul>
				<ul>
					<li>1</li>
					<li>成龙</li>
					<li class="ser">红十字会</li>
					<li>1000</li>
					<li>2013-07-08</li>
					<li>
						<span class="change2">修改</span>
						<span class="del">删除</span>
					</li>
				</ul>
				<ul>
					<li>2</li>
					<li>嘿嘿</li>
					<li class="ser">壹基金</li>
					<li>2000</li>
					<li>2013-07-08</li>
					<li>
						<span class="change2">修改</span>
						<span class="del">删除</span>
					</li>
				</ul>
				<ul>
					<li>3</li>
					<li>哈哈</li>
					<li class="ser">中国慈善总会</li>
					<li>3000</li>
					<li>2013-07-08</li>
					<li>
						<span class="change2">修改</span>
						<span class="del">删除</span>
					</li>
				</ul>
				<ul>
					<li>4</li>
					<li>佚名</li>
					<li class="ser">中国扶贫基金会</li>
					<li>4000</li>
					<li>2013-07-08</li>
					<li>
						<span class="change2">修改</span>
						<span class="del">删除</span>
					</li>
				</ul>
			</div>
			<ul id="change1">
				<li></li>
				<li><input type="text" id="change1-1"/></li>
				<li class="ser"><input type="text" id="change1-2"/></li>
				<li><input type="text"id="change1-3" /></li>
				<li><input type="text" id="change1-4"/></li>
				<li>
					<span id="sure">确定</span>
					<span id="chance">取消</span>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var ul=document.querySelectorAll("ul")
			var span=document.getElementsByTagName("span")
			var more=document.getElementById("more")
			var more1=document.getElementById("more1")
			var more2=document.getElementById("more2")
			var more3=document.getElementById("more3")
			var more4=document.getElementById("more4")
			var box3=document.getElementById("box3")
			var pri=document.getElementById("pri")
			var search=document.getElementById("search")
			var ser=document.getElementsByClassName("ser")
			var change1=document.getElementById("change1")
			var change2=document.getElementsByClassName("change2")
			var del=document.getElementsByClassName("del")
			var cha1=document.getElementById("change1-1")
			var cha2=document.getElementById("change1-2")
			var cha3=document.getElementById("change1-3")
			var cha4=document.getElementById("change1-4")
			var sure=document.getElementById("sure")
			var chance=document.getElementById("chance")
			//改
			var chan;
			var inp=change1.getElementsByTagName("input")
			for(var i=0;i<change2.length;i++){
				(function(e){
					change2[e].onclick=function(){
						change1.style.display = "block";
						chan=this.parentNode.parentNode
					}
				})(i)
			}
			//确定
			sure.onclick=function(){
				var chan_li=chan.getElementsByTagName("li")
				chan_li[1].innerText=cha1.value
				chan_li[2].innerText=cha2.value
				chan_li[3].innerText=cha3.value
				chan_li[4].innerText=cha4.value
				change1.style.display = "none";
//				赋值后清空文本框内容
				for(var i=0;i<inp.length;i++){
					inp[i].value=""
				}
			}
			//取消
			chance.onclick=function(){
				change1.style.display = "none";
				for(var i=0;i<inp.length;i++){
					inp[i].value=""
				}
			}
			//删
			var chan;
			for(var i=0;i<del.length;i++){
				(function(e){
					del[e].onclick=function(){
						var bool = confirm("是否删除这行");
						if(bool){
							var del =this.parentNode.parentNode
							del.remove()
						}
						
//						}else if(this.innerText=="修改"){
//							change1.style.display = "block";
//							chan=this.parentNode.parentNode
//						}else if(this.innerText=="确定"){
//							var chan_li=chan.getElementsByTagName("li")
//							chan_li[1]=cha1.innerText
//							chan_li[2]=cha1.innerText
//							chan_li[3]=cha1.innerText
//							chan_li[4]=cha1.innerText
//						}
					}
				})(i)
			}
			//增
			//获取下拉框的文本
			var abc
			more2.onchange=function(){
				var index=more2.selectedIndex
				abc=more2[index].innerText
			}
			more.onclick=function(){
				//新增ul
				var ul1= document.createElement("ul")
				//ul赋值内容
				ul1.innerHTML="<li>"+ul.length+"</li><li>"+more1.value+"</li><li class='ser'>"+abc+"</li><li>"+more3.value+"</li><li>"+more4.value+"</li><li><span class='change2'>修改</span> <span class='del'>删除</span></li>"
				box3.appendChild(ul1)
				//给新增的子元素绑定事件
				var new1=ul1.lastChild.lastChild
				new1.onclick=function(){
					var bool = confirm("是否删除这行");
					if(bool){
						var del =this.parentNode.parentNode
						del.remove()
					}
				}
			}
			//查
			//获取查找下拉框的文本
			var bcd
			pri.onchange=function(){
				var index=pri.selectedIndex
				bcd=pri[index].innerText
			}
			search.onclick=function(){
				var ul=document.querySelectorAll("ul")
				//找到和下拉框文本一样的行
				for(var j=0;j<ser.length;j++){
					if(bcd == ser[j].innerText){
						var str=ser[j].parentNode;
						console.log(str)
					}
				}
				//删除所有行
				for(var k=1;k<ul.length;k++){   
					ul[k].remove()
				}
				//添加找到的行
				box3.appendChild(str)
			}
		</script>
	</body>

</html>
qq_43018850
关注
  • 5
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js实现增删改查
12-18
利用原生js实现增删改查操作 附带多样效果，打包分享，仅供参考
JS实现简单的增删改查
11-05
JS实现简单的增删改查，自己写的，跟大家分享一下
用通俗到非程序员的表达方式，记录一下基于SpringBoot实现HTML页面对Mysql数据库增删改查的详细版
最新发布
weixin_45122975的博客
06-15 827
本来是做大数据的，主要走的是Python路线，但是被留在信息部门工作牵扯一些软开工作，所以学习Java软件开发，同事的态度十分嚣张看不起人，处处直言“也不看看我简历比你长两页”，遂自发学习，过程中也经历了一些困难，于此记录一下，同时也算是帮助有心上进的“同是天涯沦落人”共同进步！我的实践主要来自大佬的教程，原文在这里，，大佬的表达已经很简单明了，我这里主要是记录一下自己的学习，同时也尽可能的用通俗到非程序员也能看懂的行文来分享给正在学习框架的朋友们，希望都能尽快的掌握这个！
JavaScript 增删改查
mamayf的博客
05-17 871
实现 JavaScript 增删改查 htmlhtmlhtml 代码 <div class="container"> <div class="topview"> <div class="btnview" onclick="add"> <text>增加</text> </div> <div class="btnview" onclick="delall"
js实现user增删改查
Qiluluwawa的专栏
03-31 2053
js_users.html文件的源代码： js_users.html -->         用户名： 性别：     id="userSex" /> 职业：     type="button" value="添加用户" id="addUsers" />     value="更新用户" id="updateUser" />
纯JS+HTML简单表格增删改查
热门推荐
hikktn的博客
07-17 4万+
首先这两天写的一个简单增删改查，基本上靠百度和自学，完成的这个作业。 里面的功能十分的简陋，对于有需要的朋友一点点帮助吧。 这不是一条通往项目的链接：https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w 密码：030a 里面有一些前期练习，如果心急，那就直接看index4.html吧，那是此次的网页实现，js文件放在js文件夹下。 然后，先给大家看......
html+js实现增删改查，超简单
06-09
html+js实现增删改查，超简单
javascript实现信息增删改查的方法
10-23
主要介绍了javascript实现信息增删改查的方法,实例分析了javascript操作页面元素实现针对页面信息的增删改查功能,具有一定参考借鉴价值,需要的朋友可以参考下
javascript js 操作数组 增删改查的简单实现
10-22
下面小编就为大家带来一篇javascript js 操作数组 增删改查的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
BootStrapTable实现增删改查
03-07
在MVC（Model-View-Controller）架构中，结合C#后端，BootstrapTable可以实现数据的增删改查操作，提供用户友好的界面和高效的后台处理。 1. **BootstrapTable的基本结构** BootstrapTable的核心是HTML的`<table>`...
JS增删改查
weixin_57130691的博客
03-15 1416
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 书名搜索:<input class="txt" placeholder="请输入" /> <table style="text-align: center;width: 660px;margi...
一个表的增删改查功能的实现
08-24
某公司的机试题，简单的3层架构模式实现增删改查功能 ，
js+html写的实现表格的动态增删改查和表单验证
08-04
js+html写的实现表格的动态增删改查和表单验证
基于Javaweb中用Ajax做的增删改查
07-30
基于Javaweb中用Ajax做的一个小型增删改查，有连接到SQL Server数据库
简单html增删改查
06-05
简单html增删改查，适合初学者使用.包含两个文件
js 数组的增删改查和对象的增删改查
一步一个脚印，踏实努力，向着目标前进
07-12 917
数组适用于需要按顺序存储和访问多个相同类型的数据的情况。常见的使用场景包括存储列表、遍历数据、进行排序和过滤等操作。
Js实现简易的增删改查
m0_56026872的博客
04-22 7551
Js实现简易的增删改查 用JavaScript实现简单增删改查工作，这个应该是多数Js初学者都比较棘手的一个问题 在下面我给大家写了一个简单的案例，该案例中没有实现增加操作，大家可以自己探索一下 html结构 在结构这里我们就是用一个表格简单的实现一下 下面的div是为了方便我们实现显示与隐藏，所以单独设置了一个div <table> <thead> <tr> <th>姓名</th&
实现增删改查
weixin_48103765的博客
04-03 360
实现增删改查 1.UserMapper接口 要在UserMapper.xml配置中的namespace中绑定这个接口 在mybatis-config.xml中绑定UserMapper.xml这个配置文件 <!--namespace:命名空间，绑定一个对应的Mapper接口--> <mapper namespace="com.lonzo.dao.UserMapper"> <mappers> <mapper resource="com/lonzo
3.增删改查的实现
angel56789的博客
05-08 558
CRUD 工具类和实体类都不用修改，只用修改接口及他的配置文件 1.namespace 命名空间 namespace中的包名要和接口的包名一致！ namespace="com.faq.dao.UserDao" 2.select 选择、查询语句 <select id="getUserList" resultType="com.faq.pojo.User"> select * from mybatis.user </select> id:就是对应的namespace
用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来处理用户的操作。用户可以通过输入框添加新的待办事项，修改已有的待办事项或删除指定的待办事项。待办事项会实时显示在页面上。请注意，这只是一个基本示例，实际应用中可能需要更复杂的逻辑和交互。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值