运用ajax及JavaScript技术的增删改查

最新推荐文章于 2023-04-27 12:52:47 发布
最新推荐文章于 2023-04-27 12:52:47 发布
阅读量368 收藏 2
点赞数
文章标签： ajax增删改查
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42270942/article/details/82496385
版权

开头及CSS样式代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<style>
			*{margin: 0;}
			table{
				width: 800px;
				margin: 0 auto;
				border: 1px solid #ddd;
				border-collapse: collapse;
				text-align: center;
			}
			td{
				height: 40px;
				border: 1px solid #ddd;
			}
			input{
				width: 100px;
				border: 1px solid #ddd;
				outline: none;
				padding: 6px;
				border-radius: 4px;
				display: none;
			}
			.btn{
				border: none;
				outline: none;
				cursor: pointer;
				padding: 6px 8px;
				color: #fff;
				border-radius: 4px;
				background: darkred;
			}
			.btn-red{
				background: darkred;
			}
			.que_change{
				display: none;
				margin-right: 7px;
			}
			.add_btn{
				background: red;
			}
			.hide{
				display: none;
			}
			.show{
				display: inline-block;
			}
			.check{
				margin-left: 7px;
			}
			.model{
				position:absolute;
				top:0%;left:0%;
				display:none;
				background:rgba(0,0,0,0.3);
				width:100%;
				height:100%;
				position:fixed;
				z-index:9999;
				font-family: "微软雅黑";
			}
			.content{
				position: absolute;
				left: 35%;
				top: 25%;
				border-radius: 8px;
				width: 30%;
				height: 40%;
				background-color: #fff;
			}
			.model_header{
				height: 40px;
				background: #DDDDDD;
				border-radius: 8px 8px 0 0 ;
			}
			h3{
				
				line-height: 40px;
				margin-left: 5px;
			}
			.setbar{
				margin: 30px;
				height: 250px;
			}
			.setbar p{
				margin-bottom: 20px;
			}
			.model_footer{
				height: 40px;
				background: #DDDDDD;
				border-radius: 0 0 8px 8px ;
				
			}
			.fr{
				float: right;
				margin: 7px 10px 0 0 ;
			}
		</style>
	</head>

DOM节点代码

<body>		
	    <table>
			<tr>
				<td>
					姓名
				</td>
				<td>
					年龄
				</td>
				<td>
					成绩
				</td>
				<td>
					操作
				</td>
			</tr>
        </table>
</body>

模态框代码

<div class="model">
	<div class="content">
		<div class="model_header">
				<h3>查看</h3>
		</div>
		<div class="model_body">
				<div class="setbar">
					<p>姓名:  <span>张三</span></p>
					<p>年龄:  <span>20</span></p>
					<p>分数:  <span>80</span></p>
				</div>
		</div>
		<div class="model_footer">
				<button class="close_model btn fr">确定</button>
		</div>
	</div>
</div>

jquery区域

     ajax的加载及节点插入

     

$.ajax({
		url:"data/data.json",
		type:"get",
		success:function(res){
				var str = ""
				for (var i=0;i<res.length;i++) {
				str += '<tr><td><span>'+res[i].name+'</span><input type="text" /></td><td><span>'+res[i].age+'</span><input type="text" /></td><td><span>'+res[i].score+'</span><input type="text" /></td><td style="width: 250px;"><button class="btn btn-red change">修改</button> <button class="btn que_change">确定</button><button class="btn btn-red remove">删除</button><button class="btn btn-red check">查看</button></td></tr>'
					}
					$("table").append(str)
					$("table").append('<tr class="addtr"><td colspan="4" class="add_td"><button class="btn add_btn">增加</button></td></tr>')
				}
			})

     

 

     增加

         

$(document).on("click",".add_btn",function(){
	    $(".addtr").remove()
	    $("table").append('
        <tr>
            <td>
                <span class="hide">小明</span>
                <input type="text" class="show"/>
            </td>
            <td>
                <span class="hide">20</span><input type="text" class="show"/>
            </td>
                <td><span class="hide">80</span><input type="text" class="show"/>
            </td>
            <td>
                <button style="margin-right: 7px;" class="btn btn-red change hide">修改                               
                </button>
                <button class="btn que_change show">确定</button>
                <button class="btn btn-red remove">删除</button>
                <button class="btn btn-red check">查看</button>
            </td>
        </tr>
        <tr class="addtr"><td colspan="4" class="add_td"><button class="btn add_btn">增 加</button></td></tr>')
			})

     删除

         

$(document).on("click",".add_btn",function(){
		    $(".addtr").remove()
			$("table").append('
         <tr>
            <td>
                <span class="hide">小明</span><input type="text" class="show"/>
            </td>
            <td>
                <span class="hide">20</span><input type="text" class="show"/>
            </td>
            <td>
                <span class="hide">80</span><input type="text" class="show"/></td>
            <td>
                <button style="margin-right: 7px;" class="btn btn-red change hide">修改</button>
                <button class="btn que_change show">确定</button>
                <button class="btn btn-red remove">删除</button>
                <button class="btn btn-red check">查看</button>
            </td>
        </tr>
        <tr class="addtr">
            <td colspan="4" class="add_td"><button class="btn add_btn">增加</button>        </td>
        </tr>')
			})

     修改

         

var arrInfo = []			
	$(document).on("click",".change",function(){
		arrInfo = []
			$(this).hide()
			$(this).siblings(".que_change").show()				
			$(this).parent().siblings().find("span").each(function(){
				arrInfo.push($(this).text())
			})				
			$(this).parent().siblings().find("input").each(function(i){
					$(this).val(arrInfo[i])
			})								
				$(this).parent().siblings().find("span").hide()
				$(this).parent().siblings().find("input").show()				
			})
//			确认修改
		var arrList = []			
		$(document).on("click",".que_change",function(){
			arrList = []
			$(this).hide()
			$(this).siblings(".change").show()
			$(this).parent().siblings().find("input").each(function(){
				arrList.push($(this).val())
			})
			
			$(this).parent().siblings().find("span").each(function(i){
				$(this).text(arrList[i])
			})													
			$(this).parent().siblings().find("span").show()
			$(this).parent().siblings().find("input").hide()
		})

     查看

       

$(document).on("click",".check",function(){
			var checkList = []
			$(".model").css("display","block")
			$(this).parents("tr").find("span").each(function(){
				checkList.push($(this).text())
			})
			$(".model").find("span").each(function(i){
				$(this).text(checkList[i])
			})
		})
	     	 $(document).on("click",".close_model",function(){
		 	    $(".model").css("display","none")
		     })

     

         

 

Masa迟
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现Ajax效果的增删改查
08-15
用javascript来实现Ajax效果的增删改查
ajax实现增删查改英雄小案例
hi454的博客
11-28 1419
英雄案例实现过程 1.内容实现ajax的增删改查 目标 回顾ajax的操作，如果发请求和如何接收响应 回顾模板引擎的使用，完善整个异步操作实现动态渲染的过程 进一步理解前后台交互的流程 整体需要完成一套数据的增加删除修改和查询 回顾前端三层分离的原则 2前期准备 在合适的位置创建项目目录 将资料中资源拷贝到当前项目目录中 将页面的目录名称修改为views 用户列表页 这个页面主要的任务是来实现用户数据的动态渲染 1找到接口 2.ajax请求，获取数据 3.进行数据分析，分析获取的数据是否能够满足渲染的要求
8.jQuery例子——增删改查
qq_35574190的博客
04-13 1004
一、增加记录 1.Jquery中each遍历方法的使用 定义：jquery中提供了each方法类似JavaScript中的for(var i=0;i<length;i++)、使用方式如下 <script type="text/javascript"> //对象的封装 var app={ data:[{id:1,name:"战争之王",city:"暗...
Ajax和Json综合案例
qq_45681515的博客
04-27 439
ajax笔记
学习笔记（JavaScript）含增删改查demo
qq_47105662的博客
05-08 270
JavaScript 学习笔记，基础知识，语法详解，html+css+js+ajax实现用户增删改查demo代码
MVC+AJax+JSon实现简单的单表增删改查
wangshiwen011的博客
07-20 703
一、附html和学生类代码 student.html 其中id为'tt'的表用来显示学生信息 id为'toup'的div用来做更改信息的回显，先设置style使div隐藏 id为'toad'的div是用来添加学生的输入信息框，也设置style使div隐藏 <!DOCTYPE html> <html> <head> <meta charset...
ajax实现增删查改
qq_57104988的博客
08-29 1780
【代码】ajax实现增删查改。
使用AJAX实现数据的增删改查
ablackpanda的博客
04-11 2091
主页：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.1.4/j...
AJAX实现数据的增删改查操作详解【java后台】
10-15
主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下
手写ajax增删改查 需要自建数据库
04-03
需要自己新建数据库mysql 表 或者自备其他数据库及驱动
js 如何实现对数据库的增删改查
12-10
JavaScript操作数据库JS操作Access数据库，跟其他语言操作差不多，总结了一下习惯代码，仅供参考学习。 现在在F盘有文件abc.mdf，表名为Student，一共2个字段，Id数字类型主键，stuName文本类型，现对该表进行增删改查的操作： 1.查询 代码如下: <HTML> <HEAD> <TITLE>数据查询</TITLE> [removed] var conn = new ActiveXObject(“ADODB.Connection”); conn.Open(“DBQ=f://abc.mdb;DRIVER={Microsoft Access Driver (*.mdb)
ajax及PHP操作数据库增删改查的基础应用实例.zip
03-27
ajax及PHP操作数据库增删改查的基础应用实例。本实例可以掌握ajax及PHP的数据交互。异步实现数据库的增删改查。
Ajax实现增删改查的demo
04-01
Ajax实现增删改查的demo
一个页面实现Ajax效果的增删改查JQuery+Json版
12-19
压缩包有三个例子,多动手,拿高薪..
ajax分页增删改查
08-20
javaweb用ajax（用getJson传数据的）+servlet对mysql数据库进行分页的增删改查，有sql文件及所需jar包，样式比较简单但功能都没问题
MVC+jQuery.Ajax异步实现增删改查和分页
10-22
主要为大家详细介绍了MVC结合jQuery.Ajax异步实现增删改查和分页的相关资料，感兴趣的小伙伴们可以参考一下
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
10-18
主要介绍了jQuery+datatables插件实现ajax加载数据与增删改查功能,涉及jQuery结合datatables插件针对页面表格实现数据加载及增删改查等相关操作技巧,需要的朋友可以参考下
实验-三、数据库安全性(目的、要求和模板).doc
最新发布
04-24
实验-三、数据库安全性(目的、要求和模板).doc
基于Docker搭建K8s集群离线包
04-24
基于Docker搭建K8s集群离线包，包含部署时所需的全部文件，可在内网环境中使用，K8s为1.23.0版本，docker为20.10.9-3版本
前端增删改查的页面书写
09-25
### 回答1： 我可以提供一些建议，但不保证最终的结果会是什么样的：1. 要确保代码的可读性，使用清晰的变量名，添加...通过合理运用HTML、CSS和JavaScript等前端技术，可以构建出用户友好、功能完善的增删改查页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值