<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css" />
<script src="jquery-1.10.1.min.js" ></script>
<style>
#table {
border: 2px solid blue;
border-collapse: collapse;
width: 600px;
margin: 30px auto 0 auto;
}
tr {
height: 30px;
}
th {
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
td a {
margin-left: 35px;
color: red;
}
.popDiv {
width: 500px;
padding: 10px;
border: 1px solid red;
position: absolute;
left: 50%;
margin-left: -250px;
top: 100px;
background: white;
display: none;
z-index: 4;
}
.popDiv p {
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<table id="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>吴者然</td>
<td>23</td>
<td>前端工程师</td>
<td>15000</td>
<td>
<a href="#" class="view">查看</a>
<a href="#" class="delete">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>何开</td>
<td>28</td>
<td>ruby工程师</td>
<td>12000</td>
<td>
<a href="#" class="view">查看</a>
<a href="#" class="delete">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>暴天明</td>
<td>30</td>
<td>项目经理</td>
<td>10000+提成</td>
<td>
<a href="#" class="view">查看</a>
<a href="#" class="delete">删除</a>
<a href="#">修改</a>
</td>
</tr>
</table>
<div class="popDiv">
<p><strong>姓名</strong><span></span></p>
<p><strong>年龄</strong><span></span></p>
<p><strong>职位</strong><span></span></p>
<p><strong>工资</strong><span></span></p>
<a href="" class="close">关闭</a>
</div>
<script>
//查看
$('.view').click(function() {
var maskHeight = $(document).height();
var maskWidth = $(document).width();
//添加遮盖层
$('<div class="mask"></div>').appendTo($('body'));
$('div.mask').css({
'opacity': 0.4,
'background': "gray",
'position': 'absolute',
'left': 0,
'top': 0,
'width': maskWidth,
'height': maskHeight,
'z-index': 2
});
var arr = [];
$(this).parent().siblings().each(function() {
arr.push($(this).text());
});
//alert(arr);
$('.popDiv').show().children().each(function(i) {
$(this).children('span').text(arr[i]);
})
})
//关闭
$('.close').click(function() {
$(this).parent().hide();
$('.mask').remove();
})
//删除
$('.delete').click(function() {
$(this).parents('tr').remove()
})
</script>
</body>
</html>
PS：因为添加和修改要连接数据库，通过数据库才能操作。其实，删除也是需要的。故添加和修改有时间再细聊聊。
效果图：
相关推荐
本项目"一个页面实现Ajax效果的增删改查-JQuery+Json版"正是利用了这一技术，结合jQuery库和JSON数据格式，为用户提供了一个在一个页面上完成数据增、删、改、查功能的示例。 **jQuery** 是一个轻量级的JavaScript...
本主题聚焦于使用dtree与jQuery库动态实现无限层级的树形菜单，并涵盖增删改查的基本功能。dtree是一款基于jQuery的插件，它提供了丰富的API和灵活的配置选项，使得在网页上创建交互式树形菜单变得简单易行。 首先...
在本案例中，我们主要探讨如何使用jQuery（简称jq）实现购物车功能，包括商品的增加、删除、修改和查询，以及对购物车内商品的总价进行结算。jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax...
在本文中，我们将深入探讨如何使用jQuery（jq）来实现购物车功能，包括商品的添加、删除、修改、查询以及最终的金额结算。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互，...
关于增删改查功能的实现，这通常涉及到后端数据的交互。在用户界面上，可以通过添加按钮、删除按钮、编辑按钮和搜索框来实现这些操作。例如，添加新节点时，可以创建一个新的数据对象，然后调用特定的API将其添加到...
通过SQL语句，你可以执行CRUD操作，与PHP进行交互，实现数据的增删改查。 **Bootstrap**： Bootstrap是一个流行的前端开发框架，提供了丰富的CSS样式和JavaScript组件，可以快速构建响应式和移动优先的网页。在本...
Java开发实例：面向初学者的MVC模式与JSP实现增删改查 在Web开发领域，MVC（Model-View-Controller）模式是一种广泛采用的设计模式，它将应用程序的逻辑划分为三个主要部分，使得代码更加清晰、可维护。本实例主要...
有一定的html，css，和jq的基础，本资源能够实现购物车的增删改查和价格的计算全选和全选取消
以下是对jQuery实现表格增删改查功能的详细说明。 ### 增加记录 增加记录通常涉及在表格的tbody元素中插入新的行（tr）和单元格（td）。首先，我们需要创建一个表单让用户输入新数据，然后通过点击“新增”按钮...
在本主题中，我们将深入探讨MyBatis如何实现接口整合，以实现简单易用的增删改查（CRUD）操作。MyBatis通过将SQL语句与Java代码分离，提高了开发效率和代码的可维护性。 首先，MyBatis的核心概念是Mapper接口和...
在本文中，我们将深入探讨如何使用jQuery库来实现对网页节点的增删改查功能。jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，使得开发者可以更方便地处理HTML元素。 首先，我们需要理解jQuery的选择...
在这个例子中，Controller会处理增删改查的业务逻辑，并与Service层交互。 3. **MyBatis**：MyBatis是一个持久层框架，它简化了SQL操作，将SQL语句与Java代码分离。在SSM项目中，MyBatis通过Mapper接口与XML配置...
<jsp:useBean id="sBean" class="com.jq92.bean.SqlBean"/> <jsp:useBean id="jBean" class="com.jq92.bean.JavaBean"/> String sql="select * from student order by id"; java.util.List list=sBean.get...
SpringMVC通过JDBC或MyBatis等持久层框架与Oracle数据库进行交互，实现数据的增删改查操作。 在【描述】中提到，项目的代码注释非常详细，这有助于初学者理解每个功能的实现过程，快速学习和上手。而【压缩包子文件...
js,jq对json对象增，删，改，查操作,对json对象增加，修改，删除，查询操作 文章地址：https://blog.csdn.net/cplvfx/article/details/80480461
**jQuery AJAX 数据库应用2（增删查改）** 在Web开发中，jQuery与AJAX技术结合使用，能够实现无刷新的数据交互，极大地提升了用户体验。本教程将专注于使用jQuery的AJAX功能进行数据库操作，包括添加（Add）、删除...
"JQ不断增加滚动的数字"是一个利用jQuery库实现的动态效果，常见于显示实时更新的数据，如股票价格、彩票号码或者销售计数等。这种效果使得数字的增加过程可视化，给用户带来强烈的视觉冲击力，让网站看起来更加生动...
在当今信息化社会，留言板作为一种基础的网络互动工具，广泛应用于网站、论坛、社区以及团队内部沟通中。它不仅能够让用户发表意见，还提供了用户信息管理的必要功能，如增加、删除和修改留言。...
在网页开发中，jQuery 和 AJAX 是两个非常关键的技术...在实际项目中，你可能还需要实现更新（改）和查询（查）功能，以及更复杂的业务逻辑。这些技术是构建动态、响应式网页的基础，也是现代 Web 开发不可或缺的部分。